Dynamic radio button with problems when selecting on multiple lines-CodePudding

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"  name="id_tareff" value="${Id}"> 
  <div  style="margin-top: 10% !important;">
                            <div >
                                <input type="radio"  name="radio1" id="ncomeu" value="15">
                                <label for="ncomeu" >Não Comeu</label>
                                <input type="radio"  name="radio1" id="comeup" value="16">
                                <label for="comeup"  style="margin-left: 5%;">Comeu Pouco</label>
                                <input type="radio"  name="radio1" id="comeub" value="16">
                                <label for="ger"  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"  style="float: right; margin-right: 5%; margin-top: 4%;"><i ></i> Consultar </button>

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

            </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.

CodePudding user response：

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"  name="id_tareff" value="${Id}"> 
  <div  style="margin-top: 10% !important;">
                            <div >
                                <input type="radio"  name="radio${i}" id="ncomeu" value="15">
                                <label for="ncomeu" >Não Comeu</label>
                                <input type="radio"  name="radio${i}" id="comeup" value="16">
                                <label for="comeup"  style="margin-left: 5%;">Comeu Pouco</label>
                                <input type="radio"  name="radio${i}" id="comeub" value="16">
                                <label for="ger"  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"  style="float: right; margin-right: 5%; margin-top: 4%;"><i ></i> Consultar </button>

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

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

CodePudding user response：

Each element should have it's separate id referencing respective component:

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"  name="id_tareff" id="id_tareff-${id}" value="${Id}"> 
  <div  style="margin-top: 10% !important;">
                            <div >
                                <input type="radio"  name="radio1" id="ncomeu" value="15">
                                <label for="ncomeu" >Não Comeu</label>
                                <input type="radio"  name="radio1" id="comeup" value="16">
                                <label for="comeup"  style="margin-left: 5%;">Comeu Pouco</label>
                                <input type="radio"  name="radio1" id="comeub" value="16">
                                <label for="ger"  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"  style="float: right; margin-right: 5%; margin-top: 4%;"><i ></i> Consultar </button>

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

         <div id="printThis">
            <div >
            
               
            </div>
         </div>

      </div>
   </section>