Jquery ID appliquer

Question

J'essaie de créer un formulaire de commande dynamique en utilisant Jquery et PHP et je suis bloqué. J'ai un code Jquery qui onclick ajoute un nouvel ensemble de champs. De plus, dans ce code jquery, j'applique un style et un jquery à l'un des champs. Il s'agit d'une liste déroulante multisélection et consultable.

Mais il y a un problème. Je peux appliquer ce style pour qu'il y ait la barre de recherche, etc. au premier. Ceux qui suivent sont juste des listes multiples aléatoires sans valeurs ou barre de recherche.

Voici mon code :

$(document).ready(function() {
    var max_fields      = 100; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count

    //THIS WORKS!!
    var arrayFromPHP = ['foo', 'bar'];//<?php echo json_encode($a); ?>;
    $("#country" + x).select2({
        data: arrayFromPHP
    });

    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment

            //THIS DOESNT WORK!!
            var arrayFromPHP = ['foo', 'bar'];//<?php echo json_encode($a); ?>;
            $("#country" + x).select2({
                data: arrayFromPHP
            });

            $(wrapper).append('' +
                '<div>' +
                '<select id="country'+ x +'" multiple="multiple" style="width:300px;">' +
                '</select>' +
                '<a href="#" class="remove_field">Remove</a>' +
                '</div>' +
                '<div><input type="number" name="quantity'+ x +'" min="1" max="10"><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>

<div class="input_fields_wrap">
        <form method="post"><input type="submit" value="Add item" class="add_field_button"></form>
        <div>
            <select id="country1" multiple="multiple" style="width:300px;">
                <!-- Dropdown List Option -->
            </select>
        </div>
    </div>

Donc dans le Jquery j'ai mis 2 commentaires en majuscules rage pour marquer ce que je veux dire qui ne fonctionne pas.

Captures d'écran :

A première vue

Lorsque je clique dans l'onglet multisélection, cela fonctionne.

L'image parle d'elle-même. C'est juste un désordre et si je clique dessus, rien ne se passe.