I'm using a JQuery command to dynamically add and remove fields on 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 it to create another field on the same line next to the original.