Add fields with Jquery

Question

I am using a Jquery command to dynamically add and remove fields in a form.

$(document).ready(function(){
    var _espc_clone_index=0;
    $("#add_espc").click(function(){
        _espc_clone_index++;
        $(this).parent().after($("#_espc").clone().attr("id","_espc" + 
        _espc_clone_index));
        $("#_espc" + _espc_clone_index).css("display","inline");
        $("#_espc" + _espc_clone_index + " input").attr("id", 
        "remover_espc" + _espc_clone_index);
        $("#remover_espc" + _espc_clone_index).click(function(){
            $(this).closest("div").remove();
        });
    });
    $("#btn_enviar").on("click", function() {
        alert($("#form_teste").serialize());
    });
});

.hidden {
    display: none;
}

<div id="_espc" class="hidden">
          <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">
</div>
<form>
<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">
      <input type="button" value="Add Especialidade" id="add_espc">
</p>
<p>
    <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>

So when I click to add, it creates a field at the bottom of the page after the form. I need him to create another field on the same line next to the original.

Answer 1

The problem with your code is that the HTML structure was invalid. I noticed you put the tag <form>, then tagged <p> for each row of fields, but you were closing the tag <p> without opening it. What I did was include the opening of the tag <p> just after opening the tag <form> and your Javascript worked as expected.

Below is your code with that change:

$(document).ready(function(){
    var _espc_clone_index=0;
    $("#add_espc").click(function(){
        _espc_clone_index++;
        $(this).parent().after($("#_espc").clone().attr("id","_espc" + 
        _espc_clone_index));
        $("#_espc" + _espc_clone_index).css("display","inline");
        $("#_espc" + _espc_clone_index + " input").attr("id", 
        "remover_espc" + _espc_clone_index);
        $("#remover_espc" + _espc_clone_index).click(function(){
            $(this).closest("div").remove();
        });
    });
    $("#btn_enviar").on("click", function() {
        alert($("#form_teste").serialize());
    });
});

.hidden {
    display: none;
}

<div id="_espc" class="hidden">
    <p>
          <label for="espc">Especialidades</label>
          <select name="espc[]" id="espc">
          </select>
        <input type="button" id="remover_espc" value="Remover">
</div>
<form>
<p>
          <label for="espc">Especialidades</label>
          <select name="espc[]" id="espc">

          </select>
      <input type="button" id="remover_espc" value="Remover">
      <input type="button" value="Add Especialidade" id="add_espc">
</p>
<p>
    <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>