Tukukkk

I have a form where the user can input multiple addresses, city, street+nbr and country.

For this field to be repeated I use the jquery repeater library. For the city field I want to use a selectize input field.

I am trying to repeat those 4 fields when clicking on the button, it copies everything correctly but the selectize field does not contain inputs (i guess this is because they have the same id?) but I don't know how to instantiate another selectize instance on that object.

This is my code:

HTML:

<div class="row">

<div class="form-group col-12 mb-2 address-repeater">



    <div data-repeater-list="stcity">

        <div class="input-group mb-1" data-repeater-item>

            <div class="row">

                <div class="col-md-8">

                    <div class="form-group">

                        <label for="companystreet"><?=lang("flow_company_street")?></label>

                        <input type="text" id="companystreet" class="form-control" placeholder="<?=lang("flow_company_streetname")?>" name="companystreet" required data-validation-required-message="<?=lang("flow_company_street_validation")?>">

                        <div class="help-block font-small-3"></div>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="form-group">

                        <label for="companystreetnumber"><?=lang("flow_company_nbr")?></label>

                        <input type="text" id="companystreetnumber" class="form-control" placeholder="<?=lang("flow_company_streetnbr")?>" name="companystreetnumber" required data-validation-required-message="<?=lang("flow_company_nbr_validation")?>">

                        <div class="help-block font-small-3"></div>

                    </div>

                </div>

            </div>

            <div class="row">

                <div class="col-md-6">

                    <div class="form-group">

                        <label for="companycity"><?=lang("flow_company_city_or_commune")?></label>

                        <select id="companycity" class="companycity-select" name="companycity" autocomplete="new-password" required data-validation-required-message="<?=lang("flow_company_city_or_commune_validation")?>">

                            <option value="" selected><?=lang("flow_company_select_city_or_commune")?></option>

                            <?php

                            foreach ($citiesbe as $city) {

                                //Values are prefilled from javascript

                                $key = strtolower($city->name_nl) . "," . $city->zip_code;

                                echo "<option value="$key"> $city->name_nl ($city->zip_code)</option>";

                            }

                            ?>

                        </select>

                        <div class="help-block font-small-3"></div>

                    </div>

                </div>

                <div class="col-md-6">

                    <div class="form-group">

                        <label for="companycountry"><?=lang("flow_company_country")?></label>

                        <select id="companycountry" class="companycountry-select" name="companycountry" autocomplete="new-password" disabled>

                            <option value="BE" selected><?=lang("flow_company_country_belgium")?></option>

                        </select>

                    </div>

                </div>

            </div>

        </div>

    </div>



    <button type="button" data-repeater-create class="btn btn-primary">

        <i class="ft-plus"></i> Add new address

    </button>

</div>

Javascript:

// Custom Show / Hide Configurations

$('.address-repeater').repeater({

    show: function () {

        $(this).slideDown();

    },

    hide: function(remove) {

        $(this).slideUp(remove);

    }

});

Since the button is not the selectize element, I don't know how to assign it to the newly created element.