Add +1 to an Id when adding fields dynamically

Question

What command is used in Javascript to add +1 to a given field id name in a table?

Dynamically added tr and in that tr a field has a script that creates a new tr with the same fields as the previous one. How do I include in this new field the name of the +1 field id.

Example:

id = nome

By clicking add 3 times it creates:

id = nome1
id = nome2
id = nome3

I’m Javascript layman I’m having trouble finding the command that arrow the table id and adds the variable next to the name, which goes with a counter to each add including +1.

Answer 1

You can concatenate the name with a counter:

var cont = 1;
var nome = 'Teste';
function mostrar(){
  document.getElementById("res").innerHTML = nome + cont++;
}

<button onclick="mostrar()">Exibir</button>
<br/>
<label id="res"></label>

Answer 2

I’ll explain by entering the code:

At that part and where does my boot add replicate my tr allowing removing if necessary.

<script type="text/javascript">
        $(function () {
          function removeCampo() {
                $(".removerCampo").unbind("click");
                $(".removerCampo").bind("click", function () {
                   if($("tr.linhas").length > 1){
                        $(this).parent().parent().remove();
                   }
                });
          }

            $(".adicionarCampo").click(function () {
                novoCampo = $("tr.linhas:first").clone();
                novoCampo.find("input").val("");
                novoCampo.insertAfter("tr.linhas:last");
                removeCampo();
          });
        });
    </script>

In this second script is where when clicking on my select and choosing an item it goes to the database and looks for information about the value of that item and returns it in the result class td

<script type="text/javascript">
    function listanome(nome){
        if(nome != ''){
                    var dados = {
                        listanome : nome
                    }
                    $.post('../BUSCAR_BANCO/busca_preco.php', dados, function(retorna){
                        $(".resultado2").html(retorna);
                    });
        }else{
        alert("Sem Equipamento Selecionado");    
        }
    }
    </script>

IN HTML THIS WAY IN TR WHICH IS REPLICATED AND WHICH RETURNS THE QUERY OF THE VALUE OF THE ITEM:

<tr class="linhas">
                <td colspan="4">
                    <select style="width:355px;" name="descricao[]" id="nome" onchange="listanome(this.value)">
                        <option value="">Selecione..</option>
                                    <?php
                                        include_once '../conexaobancodedados.php';

                                        $sql = "select * from  tabelapreco left outer join unidades on unidades.id_unidade = tabelapreco.id_unidade order by `nome_tabela`";

                                        $result=  mysql_query($sql,$con);
                                        if(@mysql_num_rows($result)>0){

                                        while($row =  mysql_fetch_array($result)){

                                        ?>
                                        <option value="<?php echo $row["id_tabela"];?>"><?php echo $row["nome_tabela"];?> (<?php echo $row["nome_unidade"];?>)</option>

                                        <?php           
                                        }
                                        }else{
                                            ?>
                                            <option value="">Sem Cadastro de Equipamento</option>
                                            <?php 
                                        }

                                        ?>
                    </select>
                </td>
                <td><input type="number" style="width:50px;" size="1" name="qtd[]" id="qnt"></td>
                <td class="resultado2"></td>
                <td><input size="10" name="valortotal[]" id="total" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="10" name="royalties[]" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="6" name="imposto[]" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="16" name="transporte[]" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="11" name="desconto[]" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="16" name="valorfinal[]" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><a href="#" class="removerCampo" title="Remover linha"><input type="button" name="Excluir" style="width:70px;background-color:red;"></a></td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                       <td colspan="13">
            <center><a href="#" class="adicionarCampo" title="Adicionar item"><input type="button" name="adicionar" value="Adicionar"></a></center>
                       </td>
                </tr>

            </tfoot>

The problem is that when doing the first select it brings me the return of the correct value, and when I click add that creates the second line and make the query of another item in the new select it brings the value to all the fields of the class resulted2, since when replicating the line the name remains the same as that class.

Any idea how to solve this ? I’m a layman in javascript and only need to close.