Problem with ID and name of new HTML elements

-1

My doubt is conceptual. I have a script that generates new rows for a table. I need to apply functions to the individual rows, but as the new rows are clones from the first rotate in to adjust these functions individually. Is there a way to individualize this table?

As suggested follows part of my code instruction.

<table data-spy="scroll" class = "small-1 " id="table-prem"  >
                            <thead>
                            <tr style="background-color: #e8e8e8;">
                                <th scope="col" >CPF</th>
                                <th scope="col" >NOME</th>
                                <th scope="col" >Premio Base</th>
                                <th scope="col" >Falta Just.</th>
                                <th scope="col" >Falta Injut.</th>
                                <th scope="col" >Premio Final</th>
                                <th scope="col" >Observação</th>
                                <th scope="col"></th>
                            </tr>
                            </thead>
                            <tbody >
                                <tr>
                                    <td><input type="text" id="cpf"  style="width: 150"  name="cpf" min="0"  required ></td>
                                    <td><input type="number" class="" name="premio_base"  style="width: 100"  id="premio_base" required></td>
                                    <td><input type="number" class="" name="faltas_just"  style="width: 100"  id="falta_just" ></td>
                                    <td><input type="number" class="" name="faltas_inju"  style="width: 100"  id="falta_injus" ></td>
                                    <td><input type="number" class="" name="premio_final" style="width: 100"  id="premio_final" required></td>
                                    <td><input type="text"   class="" name="obs" id="obs" style="width: 300"  placeholder="Digite suas Observações"></td>
                                    <td>
                                        <button onclick="deleteRow(this.parentNode.parentNode.rowIndex)" type="button" class="btn btn-danger btn-sm-0"><i class="fa fa-trash"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

and I have these functions that are not working right

<script type="text/javascript">

                                    (function($) {                                

                                        //clone da table
                                        AddTableRow = function() {


                                            var newRow = $("<tr>");
                                            var cols = "";
                                            cols += '<td><input type="text" id="cpf"  style="width: 150"  name="0_cpf" min="0"  required ></td>';

                                            cols += '<td><input type="number" class="" name="premio_base"  style="width: 100"  id="premio_base" required></td>';
                                            cols += '<td><input type="number" class="" name="faltas_just"  style="width: 100"  id="falta_just" ></td>';
                                            cols += '<td><input type="number" class="" name="faltas_inju"  style="width: 100"  id="falta_injus" ></td>';
                                            cols += '<td><input type="number" class="" name="premio_final" style="width: 100"  id="premio_final" required></td>';
                                            cols += '<td><input type="text"   class="" name="obs" id="obs" style="width: 300"  placeholder="Digite suas Observações"></td>';
                                            cols += '<td>';
                                            cols += '    <button onclick="deleteRow(this.parentNode.parentNode.rowIndex)" type="button" class="btn btn-danger btn-sm-0"><i class="fa fa-trash"></i></button>';
                                            cols += '</td>';

                                            newRow.append(cols);

                                            $("#table-prem").append(newRow);

                                             $(document).ready(function() {
                                                  var base = [
                                                    {% for funcionario in funcionario %}
                                                    "{{funcionario.CPF}}",
                                                    {% endfor %}

                                                  ];
                                                  $('input[name=0_cpf]').autocomplete({
                                                    source: base
                                                  });
                                                });

                                            $(function () {
                                               // Oculta as opções do segundo select:
                                                $("#nome option").hide();
                                               // Observa o evento change do primeiro select:
                                                $('input[name=0_cpf]').on("blur",
                                                function () {
                                                // Recupera o valor selecionado:
                                                let course = $('input[name=0_cpf]').val();
                                                $('select[name=0_nome]').val(course)
                                                // Exibe as opções conforme a seleção:
                                                $("#nome option[data-course='"+ course +"']").show();
                                              });
                                            });

                                        };

                                     })(jQuery);
                     </script>

I even tried to create an "auto-id" (0_cpf) because I read somewhere that needed to be done that way, but it is not working either.

    
asked by anonymous 26.12.2018 / 20:34

0 answers