Skip to main content
se añadieron 3801 caracteres en el cuerpo
Origen Enlace

podras hacerlo de esta maneraHe editado mi respuesta para adaptarla a tu nuevo código, puedes hacer estos cambios:

Como puedes ver hice algunos cambios menores, por ejemplo, cambiar el button por un enlace para así evitar el envío del formulario al clonar los formularios, así como un cambio menor en la formula de eliminación de clones

var contador = 1;

            function agrega(){
                contador = parseInt(contador) + 1;
                  var item = `<div class="muestra"class="group" id="`+contador+`">
                <table class="table <spantable-bordered" class="titulo">Tituloid="dynamic_fieldcli">

 de Campo: <span class="numero">`+contador+`</span><                <td>
                    <div   class="col-xs-3">
                        <label for="ex1">Contacto</span><br>label>
                        <input type="text"class="form-control" name="datos"name="nombrecon_`+contador+`" placeholder="Datos"id="nombrecon_`+contador+`" type="text">
                    </>div>
                  <button data <div class="col-id="`+contador+`"xs-3">
 onClick="agrega()" class="add">                      <label for="ex2">Teléfono</label>
                    Agregar    <input class="form-control" id="telefonocon_`+contador+`" type="text">
                    </button>div>
                  <button onClick="elimina(`+contador+`)" data<div class="col-id="`+contador+`"xs-5">
 class="del">                       <label for="ex3">Mail</label>
                    Eliminar    <input class="form-control" id="mailcon_`+contador+`" type="text">
                    </button>div>
                  <hr>  <a href="#" onClick="elimina(`+contador+`)" data-id="`+contador+`" class="btn btn-danger del">Eliminar</a>
                    </td>

                </table>
            </div>`;
                    $("#lista"".lista2").append(item);
            }

            function elimina(x){
                $("div[id="+x+"]").remove();
              contador = 0;
              $("#lista".lista2 .muestra"group").each(function(){
                contador = parseInt(contador) + 1;
                $(this).attr('id',contador)
                $(this).find('span'input .numero'form-control').htmlattr(contador'id','nombrecon_'+contador+'')
                $(this).find('button'input .add'form-control').attr('data'name','nombrecon_'+contador+'')
                $(this).find('input .form-id'control').attr('id',contador'telefonocon_'+contador+'')
                $(this).find('button'input .form-control').attr('id','mailcon_'+contador+'')
                $(this).find('.del').attr('data-id',contador)
                $(this).find('button'.del').attr('onClick','elimina('+contador+')')
              })
            }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lista">class="container">
                <br />
                <br />
                <h2 align="center"><a href="http://www.webslesson.info/2016/02/dynamically-add-remove-input-fields-in-php-with-jquery-ajax.html" title="Dynamically Add or Remove input fields in PHP with JQuery">Dynamically Add or Remove input fields in PHP with JQuery</a></h2><br />
                <div class="muestra"class="form-group">
 id="1">                   <form name="add_name" id="add_name">
    <span class="titulo">Titulo de Campo                 <div class="lista1">
                            <table class="table table-bordered" id="dynamic_fieldcli">

                                <td colspan="3" align="center" style="color:#FFFFFF" <spanbgcolor="#00CCFF"><b>DATOS class="numero">1<DEL CLIENTE</span><b></span><br>td>
                                <tr>
                                    <td>CLIENTE: <input type="text" name="datos"name="nombrecli_1" placeholder="Datos"placeholder="Enter your Name" id='nombrecli_1' class="form-control name_list1" />></td>
    <button                                <td>REF. CLIENTE:<input type="text" name="referencia_cliente" placeholder="Introduce la referencía de facturación" id='referencia_cliente'  size="40" class="form-control name_list"" /></td>
                                    <td>Orden:<input type="file" name="ordendecarga" placeholder="Sube la orden de carga" id='ordendecarga'  size="10" class="form-control name_list"" /></td>
                                </tr>
                            </table>
                        </div>




            <div class="lista2">

                <div class="group" id="1">
                    <table class="table table-bordered" id="dynamic_fieldcli">

                        <td>
                        <div   class="col-xs-3">
                            <label for="ex1">Contacto</label>
                            <input class="form-control" name="nombrecon_1" id="nombrecon_1" type="text">
                        </div>
                        <div class="col-xs-3">
                            <label for="ex2">Teléfono</label>
                            <input class="form-control" id="telefonocon_1" type="text">
                        </div>
                        <div class="col-xs-5">
                            <label for="ex3">Mail</label>
                            <input class="form-control" id="mailcon_1" type="text">
                        </div>
                        <a href="#" data-id="1" onClick="agrega()" class="add">class="btn btn-success">+</a>
      Agregar
                  </button>td>

    <button onClick="elimina(1)" data-id="1" class="del">             </table>
      Eliminar          </div>
            </button>div>


    <hr>            </form>
            </div> 



           <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit">

           </div>

podras hacerlo de esta manera:

var contador = 1;

function agrega(){
    contador = parseInt(contador) + 1;
      var item = `<div class="muestra" id="`+contador+`">
                  <span class="titulo">Titulo de Campo: <span class="numero">`+contador+`</span></span><br>
                  <input type="text" name="datos" placeholder="Datos"/>
                  <button data-id="`+contador+`" onClick="agrega()" class="add">
                    Agregar
                  </button>
                  <button onClick="elimina(`+contador+`)" data-id="`+contador+`" class="del">
                    Eliminar
                  </button>
                  <hr>
                </div>`;
        $("#lista").append(item);
}

function elimina(x){
    $("div[id="+x+"]").remove();
  contador = 0;
  $("#lista .muestra").each(function(){
    contador = parseInt(contador) + 1;
    $(this).attr('id',contador)
    $(this).find('span.numero').html(contador)
    $(this).find('button.add').attr('data-id',contador)
    $(this).find('button.del').attr('data-id',contador)
    $(this).find('button.del').attr('onClick','elimina('+contador+')')
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lista">
  <div class="muestra" id="1">
    <span class="titulo">Titulo de Campo: <span class="numero">1</span></span><br>
    <input type="text" name="datos" placeholder="Datos"/>
    <button data-id="1" onClick="agrega()" class="add">
      Agregar
    </button>
    <button onClick="elimina(1)" data-id="1" class="del">
      Eliminar
    </button>
    <hr>
  </div>

</div>

He editado mi respuesta para adaptarla a tu nuevo código, puedes hacer estos cambios:

Como puedes ver hice algunos cambios menores, por ejemplo, cambiar el button por un enlace para así evitar el envío del formulario al clonar los formularios, así como un cambio menor en la formula de eliminación de clones

var contador = 1;

            function agrega(){
                contador = parseInt(contador) + 1;
                  var item = `<div class="group" id="`+contador+`">
                <table class="table table-bordered" id="dynamic_fieldcli">

                    <td>
                    <div   class="col-xs-3">
                        <label for="ex1">Contacto</label>
                        <input class="form-control" name="nombrecon_`+contador+`" id="nombrecon_`+contador+`" type="text">
                    </div>
                    <div class="col-xs-3">
                        <label for="ex2">Teléfono</label>
                        <input class="form-control" id="telefonocon_`+contador+`" type="text">
                    </div>
                    <div class="col-xs-5">
                        <label for="ex3">Mail</label>
                        <input class="form-control" id="mailcon_`+contador+`" type="text">
                    </div>
                    <a href="#" onClick="elimina(`+contador+`)" data-id="`+contador+`" class="btn btn-danger del">Eliminar</a>
                    </td>

                </table>
            </div>`;
                    $(".lista2").append(item);
            }

            function elimina(x){
                $("div[id="+x+"]").remove();
              contador = 0;
              $(".lista2 .group").each(function(){
                contador = parseInt(contador) + 1;
                $(this).attr('id',contador)
                $(this).find('input .form-control').attr('id','nombrecon_'+contador+'')
                $(this).find('input .form-control').attr('name','nombrecon_'+contador+'')
                $(this).find('input .form-control').attr('id','telefonocon_'+contador+'')
                $(this).find('input .form-control').attr('id','mailcon_'+contador+'')
                $(this).find('.del').attr('data-id',contador)
                $(this).find('.del').attr('onClick','elimina('+contador+')')
              })
            }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
                <br />
                <br />
                <h2 align="center"><a href="http://www.webslesson.info/2016/02/dynamically-add-remove-input-fields-in-php-with-jquery-ajax.html" title="Dynamically Add or Remove input fields in PHP with JQuery">Dynamically Add or Remove input fields in PHP with JQuery</a></h2><br />
                <div class="form-group">
                    <form name="add_name" id="add_name">
                        <div class="lista1">
                            <table class="table table-bordered" id="dynamic_fieldcli">

                                <td colspan="3" align="center" style="color:#FFFFFF" bgcolor="#00CCFF"><b>DATOS DEL CLIENTE</b></td>
                                <tr>
                                    <td>CLIENTE: <input type="text" name="nombrecli_1" placeholder="Enter your Name" id='nombrecli_1' class="form-control name_list1" /></td>
                                    <td>REF. CLIENTE:<input type="text" name="referencia_cliente" placeholder="Introduce la referencía de facturación" id='referencia_cliente'  size="40" class="form-control name_list"" /></td>
                                    <td>Orden:<input type="file" name="ordendecarga" placeholder="Sube la orden de carga" id='ordendecarga'  size="10" class="form-control name_list"" /></td>
                                </tr>
                            </table>
                        </div>




            <div class="lista2">

                <div class="group" id="1">
                    <table class="table table-bordered" id="dynamic_fieldcli">

                        <td>
                        <div   class="col-xs-3">
                            <label for="ex1">Contacto</label>
                            <input class="form-control" name="nombrecon_1" id="nombrecon_1" type="text">
                        </div>
                        <div class="col-xs-3">
                            <label for="ex2">Teléfono</label>
                            <input class="form-control" id="telefonocon_1" type="text">
                        </div>
                        <div class="col-xs-5">
                            <label for="ex3">Mail</label>
                            <input class="form-control" id="mailcon_1" type="text">
                        </div>
                        <a href="#" data-id="1" onClick="agrega()" class="btn btn-success">+</a>
                        </td>

                    </table>
                </div>
            </div>


                </form>
            </div> 



           <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit">

           </div>
Origen Enlace

podras hacerlo de esta manera:

var contador = 1;

function agrega(){
    contador = parseInt(contador) + 1;
      var item = `<div class="muestra" id="`+contador+`">
                  <span class="titulo">Titulo de Campo: <span class="numero">`+contador+`</span></span><br>
                  <input type="text" name="datos" placeholder="Datos"/>
                  <button data-id="`+contador+`" onClick="agrega()" class="add">
                    Agregar
                  </button>
                  <button onClick="elimina(`+contador+`)" data-id="`+contador+`" class="del">
                    Eliminar
                  </button>
                  <hr>
                </div>`;
        $("#lista").append(item);
}

function elimina(x){
    $("div[id="+x+"]").remove();
  contador = 0;
  $("#lista .muestra").each(function(){
    contador = parseInt(contador) + 1;
    $(this).attr('id',contador)
    $(this).find('span.numero').html(contador)
    $(this).find('button.add').attr('data-id',contador)
    $(this).find('button.del').attr('data-id',contador)
    $(this).find('button.del').attr('onClick','elimina('+contador+')')
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lista">
  <div class="muestra" id="1">
    <span class="titulo">Titulo de Campo: <span class="numero">1</span></span><br>
    <input type="text" name="datos" placeholder="Datos"/>
    <button data-id="1" onClick="agrega()" class="add">
      Agregar
    </button>
    <button onClick="elimina(1)" data-id="1" class="del">
      Eliminar
    </button>
    <hr>
  </div>

</div>