Add rows to a table with Jquery and add a new ID

Question

I am using the solution I saw in this topic to insert new fields to a table Add Line

However I need each inserted row to come with an ID, because I will have to take some data from the database and return to a certain line.

The idea and once you add a new line, this line automatically comes with the TD ID datos_usuario_id with an id so I can assign the data coming from the query aou BD within it

The code went like this

 // já cria logo uma cópia do TBODY original
   var copia = document.querySelector("#tabela-herdeiro tbody").outerHTML;

    $(document).on("click", "#tabela-herdeiro button", function(){

      var tr = $(this).closest("tbody");
      
      tr.fadeOut(400, function(){
        this.remove(); 
      }); 

    });

    $("#adicionar").on("click", function(){
        $("#tabela-herdeiro").append(copia);
    });          
 
 
 
 
 
 function fMasc(objeto,mascara) {
				obj=objeto
				masc=mascara
				setTimeout("fMascEx()",1)
			}
			function fMascEx() {
				obj.value=masc(obj.value)
			}
			function mTel(tel) {
				tel=tel.replace(/\D/g,"")
				tel=tel.replace(/^(\d)/,"($1")
				tel=tel.replace(/(.{3})(\d)/,"$1)$2")
				if(tel.length == 9) {
					tel=tel.replace(/(.{1})$/,"-$1")
				} else if (tel.length == 10) {
					tel=tel.replace(/(.{2})$/,"-$1")
				} else if (tel.length == 11) {
					tel=tel.replace(/(.{3})$/,"-$1")
				} else if (tel.length == 12) {
					tel=tel.replace(/(.{4})$/,"-$1")
				} else if (tel.length > 12) {
					tel=tel.replace(/(.{4})$/,"-$1")
				}
				return tel;
			}
			function mCNPJ(cnpj){
				cnpj=cnpj.replace(/\D/g,"")
				cnpj=cnpj.replace(/^(\d{2})(\d)/,"$1.$2")
				cnpj=cnpj.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3")
				cnpj=cnpj.replace(/\.(\d{3})(\d)/,".$1/$2")
				cnpj=cnpj.replace(/(\d{4})(\d)/,"$1-$2")
				return cnpj
			}
			function mCPF(cpf){
				cpf=cpf.replace(/\D/g,"")
				cpf=cpf.replace(/(\d{3})(\d)/,"$1.$2")
				cpf=cpf.replace(/(\d{3})(\d)/,"$1.$2")
				cpf=cpf.replace(/(\d{3})(\d{1,2})$/,"$1-$2")
				return cpf
			}
			function mCEP(cep){
				cep=cep.replace(/\D/g,"")
				cep=cep.replace(/^(\d{2})(\d)/,"$1.$2")
				cep=cep.replace(/\.(\d{3})(\d)/,".$1-$2")
				return cep
			}
			function mNum(num){
				num=num.replace(/\D/g,"")
				return num
			}
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
  <button  class="btn btn-large btn-success btn-xs" id="adicionar">Adicionar atleta</button>
                     <br>
 
 <table class="table table-bordered table-hover"  id="tabela-herdeiro">
                            <thead style=" background: #2196f3; color: #fff">
                                <tr>             
                                <th >CPF</th>      
                                <th>Dados do usuario</th>       

                                <th>Remover</th>
                                </tr>
                            </thead>
                            <tbody>


                        <tr>
                            <td>
                                <input type="text" name="cpf_cliente_equipe"  value="" class="form-control cpf_inscricao" onkeydown="javascript: fMasc( this, mCPF );" maxlength="14" required="required" style=" max-width: 150px;"/>    
                            </td>         
                            <td id="dados_usuario_id"style="vertical-align:middle;" >
                                
                            </td>   
                            <td style="vertical-align:middle;">
                           
<button class="btn btn-large btn-danger btn-xs" type="button">Remover</button>

                            </td> 

                        </tr>



                            </tbody>
                        </table>

Answer 1

I do not know if I understood very well what was missing for you to finish what you need, but initially you have already created an object containing the DOM from the copy, just manipulate it before insertion into your table. In the example assigns an ID and class to tbody.

If the change has to be within the TD, simply change the thisCopia for it to look for the TD and add the class: thisCopia.find('td').attr('id')...

// já cria logo uma cópia do TBODY original
var copia = document.querySelector("#tabela-herdeiro tbody").outerHTML;

$(document).on("click", "#tabela-herdeiro button", function() {

  var tr = $(this).closest("tbody");

  tr.fadeOut(400, function() {
    this.remove();
  });

});

$("#adicionar").on("click", function() {
  var thisCopia = $(copia);
  thisCopia.attr('id', 'seuID').addClass('copia');
  $("#tabela-herdeiro").append(thisCopia);
});





function fMasc(objeto, mascara) {
  obj = objeto
  masc = mascara
  setTimeout("fMascEx()", 1)
}

function fMascEx() {
  obj.value = masc(obj.value)
}

function mTel(tel) {
  tel = tel.replace(/\D/g, "")
  tel = tel.replace(/^(\d)/, "($1")
  tel = tel.replace(/(.{3})(\d)/, "$1)$2")
  if (tel.length == 9) {
    tel = tel.replace(/(.{1})$/, "-$1")
  } else if (tel.length == 10) {
    tel = tel.replace(/(.{2})$/, "-$1")
  } else if (tel.length == 11) {
    tel = tel.replace(/(.{3})$/, "-$1")
  } else if (tel.length == 12) {
    tel = tel.replace(/(.{4})$/, "-$1")
  } else if (tel.length > 12) {
    tel = tel.replace(/(.{4})$/, "-$1")
  }
  return tel;
}

function mCNPJ(cnpj) {
  cnpj = cnpj.replace(/\D/g, "")
  cnpj = cnpj.replace(/^(\d{2})(\d)/, "$1.$2")
  cnpj = cnpj.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3")
  cnpj = cnpj.replace(/\.(\d{3})(\d)/, ".$1/$2")
  cnpj = cnpj.replace(/(\d{4})(\d)/, "$1-$2")
  return cnpj
}

function mCPF(cpf) {
  cpf = cpf.replace(/\D/g, "")
  cpf = cpf.replace(/(\d{3})(\d)/, "$1.$2")
  cpf = cpf.replace(/(\d{3})(\d)/, "$1.$2")
  cpf = cpf.replace(/(\d{3})(\d{1,2})$/, "$1-$2")
  return cpf
}

function mCEP(cep) {
  cep = cep.replace(/\D/g, "")
  cep = cep.replace(/^(\d{2})(\d)/, "$1.$2")
  cep = cep.replace(/\.(\d{3})(\d)/, ".$1-$2")
  return cep
}

function mNum(num) {
  num = num.replace(/\D/g, "")
  return num
}

.copia {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn btn-large btn-success btn-xs" id="adicionar">Adicionar atleta</button>
<br>

<table class="table table-bordered table-hover" id="tabela-herdeiro">
  <thead style=" background: #2196f3; color: #fff">
    <tr>
      <th>CPF</th>
      <th>Dados do usuario</th>

      <th>Remover</th>
    </tr>
  </thead>
  <tbody>


    <tr>
      <td>
        <input type="text" name="cpf_cliente_equipe" value="" class="form-control cpf_inscricao" onkeydown="javascript: fMasc( this, mCPF );" maxlength="14" required="required" style=" max-width: 150px;" />
      </td>
      <td id="dados_usuario_id" style="vertical-align:middle;">

      </td>
      <td style="vertical-align:middle;">

        <button class="btn btn-large btn-danger btn-xs" type="button">Remover</button>

      </td>

    </tr>



  </tbody>
</table>