Problem creating a dynamic add and remove field

Question

So, I’m doing a clinic registration form, and on this form is a specialty field that takes the data from another database and shows the list options to choose from, i am trying to put an add button and a remove so that register more than one specialty for each clinic, in the format input=text ta working but the field select I am unable to make it work, nothing happens when clicking.

SCRIPT

    $(document).ready(function() {
    var campos_max          = 10;   //max de 10 campos
    var x = 1; // campos iniciais
    $('#add').click (function(e) {
            e.preventDefault();     //prevenir novos clicks
            if (x < campos_max) {
                    $('#listas').append('<div>\
                            <select name="espc">\
                            <a href="#" class="remover_campo">Remover</a>\
                            </div>');
                    x++;
            }
    });

    // Remover o div anterior
    $('#espc').on("click",".remover_campo",function(e) {
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
    });

HTML

    <p>
<label for="espc">Especialidades</label>
<select name="espc" id="espc">
<?php
include('conectadb.php');
$pesquisa="select codigo_esp,tipo from especialidades order by tipo";
$query=mysqli_query($conn,$pesquisa);
while($dados=mysqli_fetch_array($query))
{
    $codigo=$dados['codigo_esp'];
    $tipo=$dados['tipo'];
    echo "<option value='" .$codigo ."'>" .$tipo ."</option>";
}
?>
</select>
<input type="button" id="add" value="adicionar">

Sorry any silly mistake I’m still novice; Thank you.

Answer 1

Here’s one of the possible ways to add dynamic fields using jQuery

Example

$(document).ready(function(){
  // Vamos usar um número de índice exclusivo para cada nova instância do formulário clonado
  var _espc_clone_index=0;
  //When the button is clicked (or Enter is pressed while it's selected)
  $("#add_espc").click(function(){
    // Incremente o índice exclusivo porque estamos criando uma nova instância do formulário
    _espc_clone_index++;
    // Clonar o formulário e colocá-lo apenas antes do botão <p>. Também dê ao seu id um índice exclusivo
    $(this).parent().before($("#_espc").clone().attr("id","_espc" + _espc_clone_index));
    // Tornar o clone visível alterando CSS
    $("#_espc" + _espc_clone_index).css("display","inline");
    // Altera a ID do INPUT remover
    $("#_espc" + _espc_clone_index + " input").attr("id", "remover_espc" + _espc_clone_index);
    // Quando o botão Remover é clicado (ou Enter é pressionado enquanto ele está selecionado)
    $("#remover_espc" + _espc_clone_index).click(function(){
      // Remove
      $(this).parent().parent().remove();
    });
  });
  $("#btn_enviar").on("click", function() {
    alert($("#form_teste").serialize());
  });
});

.hidden {
    display: none;
}

<!--
O código abaixo, é como se fosse um template,  é ocultado, e atravês do jQuery fazemos o clone dele. Importante: ele deve ficar fora da tag FORM.
-->
<div id="_espc" class="hidden">
    <p>
        <p>
          <label for="espc">Especialidades</label>
          <select name="espc[]" id="espc">
            <option value="1">Opção 1</option>
            <option value="2">Opção 2</option>
            <option value="3">Opção 3</option>
            <option value="4">Opção 4</option>
            <option value="5">Opção 5</option>
          </select>
        <input type="button" id="remover_espc" value="Remover">
    </p>
</div>

<!-- Aqui vem seu form -->
<form id="form_teste">
    <p>
      <!-- Botão para adicionar os campos -->
        <input type="button" value="Add Especialidade" id="add_espc">
    </p>
  <p>
    <!-- Botão para enviar o form, aqui fiz apenas para exemplo -->
    <input type="button" value="Enviar" id="btn_enviar" />
  </p>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

With the same code jQuery above, put out the tag form, when you click the add button, it will clone.

<div id="_espc" class="hidden">
    <p>
        <p>
          <label for="espc">Especialidades</label>
          <select name="espc[]" id="espc">
          <?php
          include('conectadb.php');
          $pesquisa="select codigo_esp,tipo from especialidades order by tipo";
          $query=mysqli_query($conn,$pesquisa);
          while($dados=mysqli_fetch_array($query))
          {
              $codigo=$dados['codigo_esp'];
              $tipo=$dados['tipo'];
              echo "<option value='" .$codigo ."'>" .$tipo ."</option>";
          }
          ?>
          </select>
        <input type="button" id="remover_espc" value="Remover">
    </p>
</div>

Editing:

Added javascript line that changes the ID of the remove button, fixing the issue that could not remove the cloned field.

Answer 2

You have to add an additional input field next to the select field. But at the time of removing gave a problem, by clicking on the added input was deleted due to this code snippet $("#_espc" + _espc_clone_index + " input"). to solve this problem I commented on the code that was part of the removal and added this $("#_espc" + _espc_clone_index).on('click', '.fechar', function() { $(this).parent().parent().remove(); });

and on the remove button, I added a .close. class thus <input type="button" id="remover_espc" class="fechar" value="Remover">

complete code

	
	$(document).ready(function(){
  // Vamos usar um número de índice exclusivo para cada nova instância do formulário clonado
  var _espc_clone_index=0;
  //When the button is clicked (or Enter is pressed while it's selected)
  $("#add_espc").click(function(){
    // Incremente o índice exclusivo porque estamos criando uma nova instância do formulário
    _espc_clone_index++;
    // Clonar o formulário e colocá-lo apenas antes do botão <p>. Também dê ao seu id um índice exclusivo
    $(this).parent().before($("#_espc").clone().attr("id","_espc" + _espc_clone_index));
    // Tornar o clone visível alterando CSS
    $("#_espc" + _espc_clone_index).css("display","inline");
    // Altera a ID do INPUT remover
   // $("#_espc" + _espc_clone_index + " button").attr("id", "remover_espc" + _espc_clone_index);
    // Quando o botão Remover é clicado (ou Enter é pressionado enquanto ele está selecionado)
    //$("#remover_espc" + _espc_clone_index).click(function(){
      // Remove
    //  $(this).parent().parent().remove();
   // });
	  $("#_espc" + _espc_clone_index).on('click', '.fechar', function() {
       $(this).parent().parent().remove();
    });
  });
  $("#btn_enviar").on("click", function() {
    alert($("#form_teste").serialize());
  });
});

	
	.hidden {
    display: none;
}
	

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="_espc" class="hidden">
    <p>
        <p>
          <label for="espc">Especialidades</label>
          <select name="espc[]" id="espc">
            <option value="1">Opção 1</option>
            <option value="2">Opção 2</option>
            <option value="3">Opção 3</option>
            <option value="4">Opção 4</option>
            <option value="5">Opção 5</option>
          </select>
			<label for="espc">Especialidades</label>
          <input name="vezes[]" type="text" id="espc" size="5">
        <input type="button" id="remover_espc" class="fechar" value="Remover">
    </p>
</div>

<!-- Aqui vem seu form -->
<form id="form_teste">
    <p>
      <!-- Botão para adicionar os campos -->
        <input type="button" value="Add Especialidade" id="add_espc">
    </p>
  <p>
    <!-- Botão para enviar o form, aqui fiz apenas para exemplo -->
    <input type="button" value="Enviar" id="btn_enviar" />
  </p>
</form>