Cloned select2 is not responding when I click

Question

So I cloned my select2 form, the original select2 form is working fine. But, for the cloned one is not working, when I click it just not responding.

My code

<div class="card-body" id="wrapper-form">
    <div class="mb-1">
        <button class="btn btn-success" type="submit">Add</button>
        <input class="btn btn-info" type="button" id="clone" value="New Item" />
    </div>
    <div class="form-row" id="form-clone">
        <div class="form-group col">
            <select id="master_item_id" name="master_item_id"
                class="form-control">
                <option></option>
            </select>
        </div>
        <div class="form-group col-3">
            <input name="quantity" id="quantity" type="text"
                class="form-control @error('quantity') placeholder="Quantity">
        </div>
    </div>
</div>

<script>
    $("#clone").click(function() {
        $("#form-clone").clone().appendTo("#wrapper-form");
    });
</script>
<script src="{{ asset('select2-bootstrap4/dist/js/select2.min.js') }}"></script>
<script>
    $(function () {
        $('select').each(function () {
            $(this).select2({
                theme: 'bootstrap4',
                placeholder: "Item",
                allowClear: true,
            });
        });
    });
</script>

I tried this but instead it doesn't clone at all when I click the button.

<script>
    $(document).ready(function () {
    $("#form-clone").children("select").select2();
    $("#clone").click(function () {
        $("#form-clone")
            .children("select")
            .select2("destroy")
            .end()
            .append(
                $("#form-clone")
                .children("select")
                .first()
                .clone()
        );
        $("#form-clone").children("select").select2();
    });
});
</script>
<script src="{{ asset('select2-bootstrap4/dist/js/select2.min.js') }}"></script>
<script>
    $(function () {
        $('select').each(function () {
            $(this).select2({
                theme: 'bootstrap4',
                placeholder: "Item",
                allowClear: true,
            });
        });
    });
</script>

Is there something I miss from my code above? Or is there better way to fix this? Thanks!

Answer 1

It's because you are not calling the select2 function after cloning, so try this instead:

$("#clone").click(function() {
  let el = $("#form-clone").clone();
  el.appendTo("#wrapper-form");
  $(el)
   .find('select')
   .select2({
     theme: 'bootstrap4',
     placeholder: "Item",
     allowClear: true,
    });
});

moreover you need to remove id and name from the select tag since one form can not have multiple unique ids