Add and remove select with button

Question

I am developing a form in which I have a select that chooses states and capitals of brazil, but as those who fill can add more than one select I need to make a button add another select, is that in case I’m pulling this data from a json. Follow my code below

    <div class="tab">Escreva nos espaços abaixo todas as cidades que compõe o seu Distrito:
                <select id="estados" oninput="this.className = ''" name="estados" class="estados">
                    <option value=""></option>
                </select>
                <select id="cidades" oninput="this.className = ''" name="cidades" class="cidades">
                </select>
                <div class="adicionar"></div>
                <p><button id="addCidade">Adicionar Cidade</button></p>
            </div>


    $(document).ready(function () {     
    $.getJSON('estados_cidades.json', function (data) {
        var items = [];
        var options = '<option value="">escolha um estado</option>';    
        $.each(data, function (key, val) {
            options += '<option value="' + val.nome + '">' + val.nome + '</option>';
        });                 
        $("#estados").html(options);                
        $("#estados").change(function () {              
            var options_cidades = '';
            var str = "";                   
            $("#estados option:selected").each(function () {
                str += $(this).text();
            });
            $.each(data, function (key, val) {
                if(val.nome == str) {                           
                    $.each(val.cidades, function (key_city, val_city) {
                        options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
                    });                         
                }
            });
            $("#cidades").html(options_cidades);                
        }).change();                
    }); 
});

Answer 1

You can clone the element and add in div. For this use the method .clone(). But change the id so it won’t be repeated.

It is also important to change the name for name="cidades[]" to be able to take as array in backend.

Then create an event click to clone and insert the new select in this way:

$("#addCidade").on("click", function(){

   var conta = $(".cidades").length; // conta quantos existem para gerar um novo id
   var clone = $("#cidades").clone().attr("id", "cidades"+conta);
   clone.appendTo(".adicionar");

});

Example:

$("#addCidade").on("click", function(){
   
   var conta = $(".cidades").length;
   var clone = $("#cidades").clone().attr("id", "cidades"+conta);
   clone.appendTo(".adicionar");
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">Escreva nos espaços abaixo todas as cidades que compõe o seu Distrito:
   <select id="estados" oninput="this.className = ''" name="estados" class="estados">
      <option value=""></option>
   </select>
   <select id="cidades" oninput="this.className = ''" name="cidades[]" class="cidades">
      <option value="1">BSB</option>
   </select>
   <div class="adicionar"></div>
   <p><button id="addCidade">Adicionar Cidade</button></p>
</div>