Dynamic radio button with problems when selecting on multiple lines

January 25, 2023

I have the following code, which generates the form dynamically. The code is as follows:

var data = [
   {Id: "1", },
   {Id: "2", },
   {Id: "3", },
   {Id: "4", },
   {Id: "5", },
   {Id: "6", },
];

$(document).on('click', '.dad-pagamento', function() {

  var linha = ``;
  Object.keys(data).forEach(b => {
   Id = data[b].Id;
  linha += `<input type="text" class="form-control" name="id_tareff" value="${Id}"> 
  <div class="containner" style="margin-top: 10% !important;">
                            <div class="radio_containner">
                                <input type="radio" class="inradio" name="radio1" id="ncomeu" value="15">
                                <label for="ncomeu" class="labradio">Não Comeu</label>
                                <input type="radio" class="inradio" name="radio1" id="comeup" value="16">
                                <label for="comeup" class="labradio" style="margin-left: 5%;">Comeu Pouco</label>
                                <input type="radio" class="inradio" name="radio1" id="comeub" value="16">
                                <label for="ger" class="labradio" style="margin-left: 5%;">Comeu Bem</label>
                            </div>
                          </div>        `;
  
  $(".pagmfalta").html(linha);
  $('#minhaDiv1').show();
  
  })

});

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

<button type="button" class="btn btn-info dad-pagamento" style="float: right; margin-right: 5%; margin-top: 4%;"><i class="metismenu-icon pe-7s-search"></i> Consultar </button>

   <section id="s1">
      <div style="display:none" id="minhaDiv1">
            <div class="row pagmfalta">

            </div>
      </div>
   </section>

The problem I have is with the radio buttons. I select one of the options in the first line, when I select in the second it removes the selection from the first line and it cannot. Each row should have its own radio button selection.

>Solution :

Radio buttons are grouped with the name attribute. Use the index parameter in your forEach() to give each line’s radios a new name.

var data = [
   {Id: "1", },
   {Id: "2", },
   {Id: "3", },
   {Id: "4", },
   {Id: "5", },
   {Id: "6", },
];

$(document).on('click', '.dad-pagamento', function() {

  var linha = ``;
  Object.keys(data).forEach((b,i) => {
   Id = data[b].Id;
  linha += `<input type="text" class="form-control" name="id_tareff" value="${Id}"> 
  <div class="containner" style="margin-top: 10% !important;">
                            <div class="radio_containner">
                                <input type="radio" class="inradio" name="radio${i}" id="ncomeu" value="15">
                                <label for="ncomeu" class="labradio">Não Comeu</label>
                                <input type="radio" class="inradio" name="radio${i}" id="comeup" value="16">
                                <label for="comeup" class="labradio" style="margin-left: 5%;">Comeu Pouco</label>
                                <input type="radio" class="inradio" name="radio${i}" id="comeub" value="16">
                                <label for="ger" class="labradio" style="margin-left: 5%;">Comeu Bem</label>
                            </div>
                          </div>        `;
  
  $(".pagmfalta").html(linha);
  $('#minhaDiv1').show();
  
  })

});

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

<button type="button" class="btn btn-info dad-pagamento" style="float: right; margin-right: 5%; margin-top: 4%;"><i class="metismenu-icon pe-7s-search"></i> Consultar </button>

   <section id="s1">
      <div style="display:none" id="minhaDiv1">
            <div class="row pagmfalta">

            </div>
      </div>
   </section>