Checkbox is only picking up the first row of the table

Question

Hello, I’m studying and I’m having a difficulty with that, I have a table with some data that comes from the Postgre bank, I generated a checkbox to get the data of the row of the requested table to be able to accept the work, however independent of the checkbox line it only takes the data of the first.

When I click on the checkbox of the last row it does not return the data of the corresponding row.

What could I be doing wrong ?

var linha;
function deletar() {
    var myTD = document.getElementById('ordersTable').getElementsByTagName('tr')[linha];
    myTD.parentNode.removeChild(myTD);
}

function selecionar(name) {
    linha = document.forms["form"].elements[name].value;
    var status = document.forms["form"].elements[name].checked;
    popularInputs(linha, status);
}

function popularInputs(td, status) {
    if (status === false) {
        limpeza();
    } else {
        document.forms["form"].elements["nome"].value = document.getElementById("nome" + td).innerHTML;
        document.forms["form"].elements["trabalhos"].value = document.getElementById("trabalhos" + td).innerHTML;
        document.forms["form"].elements["celular"].value = document.getElementById("celular" + td).innerHTML;
        document.forms["form"].elements["email"].value = document.getElementById("email" + td).innerHTML;
    }
}

function limpeza() {
    document.forms["form"].elements["nome"].value = "";
    document.forms["form"].elements["trabalhos"].value = "";
    document.forms["form"].elements["email"].value = "";
    document.forms["form"].elements["celular"].value = "";
}

HTML

<form name="form"  method="post">
        {% csrf_token %}
        <table id="ordersTable" summary="Tabela de dados de uma agenda" class="table">
            <thead class="thead-dark">
                <th><input type="checkbox" id="marcar" name="marcar" /></th>

                <th scope="col">Nome do Cliente </th>
                <th scope="col">Email do Cliente </th>
                <th scope="col">Telefone do Cliente </th>
                <th scope="col">Dia para contato </th>
                <th scope="col">Tipo de trabalhos </th>
                <th scope="col">Mensagem </th>

            </thead>
            {% for value in List %}
            <tbody>
                <tr>
                    <td><input type="checkbox" name="marcar0"
                            onclick="return selecionar(this.name);" /></td>
                    <td id="nome" class="dark-row" scope="row">{{value.nome}}</th>
                    <td id="email" class="light-row">{{value.email}}</td>
                    <td id="celular" class="light-row">{{value.celular}}</td>
                    <td class="light-row">{{value.data}}</td>
                    <td id="trabalhos" class="light-row">{{value.trabalhos}}</td>
                    <td class="light-row">{{value.mensagem}}</td>
                </tr>
            </tbody>
            {% endfor %}
        </table>
        <h2>Aceitar trabalho</h2>
        <input type="text" name="nome" placeholder="Nome" />
        <input type="text" name="trabalhos" placeholder="Trabalho" />
        <input type="email" name="email" placeholder="Email" />
        <input type="tel" name="celular" placeholder="Telefone" />
        <input type="submit" name="cadastrar" value="Aceitar" />
        <input type="submit" name="remover" value="Remover" onclick="return deletar();" />
    </form>

Thank you for your attention.

Answer 1

I was able to solve the problem the checkbox was always taking the same information, I used the primary key of my table as the ID in all the lines that needed the checkbox and changed to radio so there was no problem.

JS

function popularInputs(td) {
    document.forms["form"].elements["nome"].value = document.getElementById("nome" + td).innerHTML;
    document.forms["form"].elements["trabalhos"].value = document.getElementById("trabalhos" + td).innerHTML;
    document.forms["form"].elements["celular"].value = document.getElementById("celular" + td).innerHTML;
    document.forms["form"].elements["email"].value = document.getElementById("email" + td).innerHTML;
}

HTML

<div class="table-responsive">
    <h2>Caixa de entrada</h2>
    <form name="form"  method="post">
        {% csrf_token %}
        <table id="ordersTable" summary="Tabela de dados de uma agenda" class="table">
            <thead class="thead-dark">
                <th></th>
                
                <th scope="col">Nome do Cliente </th>
                <th scope="col">Email do Cliente </th>
                <th scope="col">Telefone do Cliente </th>
                <th scope="col">Dia para contato </th>
                <th scope="col">Tipo de trabalhos </th>
                <th scope="col">Mensagem </th>

            </thead>
            {% for value in List %}
            <tbody>
                <tr teste="{{id_cliente}}">
                    <td><input type="radio" id="{{value.id_cliente}}" name="a"
                            onclick="popularInputs(this.id)" /></td>
                    <td id="nome{{value.id_cliente}}" class="dark-row" scope="row">{{value.nome}}</th>
                    <td id="email{{value.id_cliente}}" class="light-row">{{value.email}}</td>
                    <td id="celular{{value.id_cliente}}" class="light-row">{{value.celular}}</td>
                    <td class="light-row">{{value.data}}</td>
                    <td id="trabalhos{{value.id_cliente}}" class="light-row">{{value.trabalhos}}</td>
                    <td class="light-row">{{value.mensagem}}</td>
                </tr>
            </tbody>
            {% endfor %}
        </table>
        <h2>Aceitar trabalho</h2>
        <input type="text" name="nome" placeholder="Nome" />
        <input type="text" name="trabalhos" placeholder="Trabalho" />
        <input type="email" name="email" placeholder="Email" />
        <input type="tel" name="celular" placeholder="Telefone" />
        <input type="submit" name="cadastrar" value="Aceitar" onclick="return alerta();"/>
        <input type="reset" value="Limpar"/>
        
    </form>
</div>

I hope this helps someone in the future. Thank you

Answer 2

Reading your code in the HTML part has a javascript in the click event that is where you are capturing the data, only you defined that all the input has the same name="mark" I believe that is what is giving the error and bringing the data where it is not marked, you can do a debug there in this part to see it tries like this:

<tbody>
            <tr>
                <td><input type="checkbox" name={{value.name}}
                        onclick="return selecionar(this.name);" /></td>
                <td id="nome" class="dark-row" scope="row">{{value.nome}}</th>
                <td id="email" class="light-row">{{value.email}}</td>
                <td id="celular" class="light-row">{{value.celular}}</td>
                <td class="light-row">{{value.data}}</td>
                <td id="trabalhos" class="light-row">{{value.trabalhos}}</td>
                <td class="light-row">{{value.mensagem}}</td>
            </tr>
        </tbody>