How to make Select2 work with jQuery Form Repeater?

How to make Select2 work with jQuery Form Repeater?

What are jQuery form repeater and Select2?

If you have ever had to create an HTML form with a variable number of inputs then I am sure you came across a plugin called jQuery form repeater. This plugin is a really handy tool as it enables you to duplicate any sort of input in a Form with a click of a button!. I have used this plugin in many of my projects and it has worked fine for me but except for a single case of another jQuery plugin called Select2. Just like form repeater Select2 is another awesome jQuery plugin which gives you a customizable select box with support for searching, remote data sets, tagging, infinite scrolling and many other useful options. But it has been a long-standing problem for many developers to make Select2 work with jQuery form repeater.

The problem:

It’s all in the way both these plugins work by default. The Form Repeater duplicates the specified input on a button click but Select2 must be manually initialized using jQuery and is usually initialized on document ready.

The problem arises when you try to duplicate a Select2 field. It does not work because the Select2 is not initialized for the newly duplicated input!. So let us see the workaround to make Select2 work with Form Repeater.

Make Select2 work with jQuery form repeater:

Here is a solution I came up with which involves initializing Select2 on form repeater button click!

A typical jQuery form repeater example:

Notice I have assigned an id="repeater-button" button which triggers the form repeater? We will hook into this button’s click event and execute a jQuery function which will initialize the Select2 for all the inputs with class="select2"

Now just put this script after the body tag:

If you execute the above function on button click event it assures that the function is only executed after the inputs have been duplicated and waiting for just 100 milliseconds also guarantees that the input has already been duplicated.

Your Select2 should work now with form repeater!! but just make sure you initialize the original select2 input on document ready!

What do you think? Is there a better way of doing this? Share your thoughts in the comments below!!

Did you like this article? then consider checking out my posts in the web development category and my projects!


You can also consider making a small donation to support me. Your donation will directly contribute to the running cost of this website and hopefully my college too 🙂

Paypal: | UPI: [email protected]

Leave a Reply

7 Comment threads
6 Thread replies
Most reacted comment
Hottest comment thread
10 Comment authors
Sapnesh NaikSumonJoelErhanJulio Recent comment authors
newest oldest most voted
Notify of
kidane gebremedhin

Very helpful and clear. Great!


did you try this on a real example? Is not working in my project.


Hi thanks for your article, very interesting, is it also possible to use Jquery validator plugin to validate the input fileds?


You should use “show” callback. “show” is called just after an item is added.


Hello my friend, firstly, thanks for your think, very good and work for me. Look, how i can make the same example to Input Mask?


In show method :

show: function () {
$(‘.tax_no’).mask(‘9999999999’,{placeholder : ‘ ‘});
$(‘.phone’).mask(‘0(999) 999-9999’);


How to make Typeahead.js work with jQuery Form Repeater?


Thanks for our awesome article. But it does not work for me. for the repetitive form, it shows *no result found* . Can you please help me to fix my issue?
see the image below :