I cannot select the dynamically created radiobuttons

Question

I’m having a hard time manipulating radiobutton components created dynamically by clicking the button, but it’s presenting a small problem, when I click on the generated radiobutton, the selected component is the main one contained in the table I use with these components.

      // Initialize select input materialize
      $(document).ready(function() {
         
          // Add row in table
          var i=1;
          $("#btAddRow").click(function(){
            $('#addr'+i).html("#'"+(i+1)+"' <div class='row'><div class='input-field col s7'><input type='text' name='item_pergunta["+i+"]' id='item_pergunta'><label for='item_pergunta'>Descri&ccedil;&atilde;o do Item</label> </div><div class='input-field col s5'><label>Correta?</label><p style='display:inline; margin-left: 50px'><input class='with-gap' name='group["+i+"]' type='radio' id='rb1'  /><label for='rb1'>Sim</label><input class='with-gap' name='group1["+i+"]' type='radio' id='rb2'  /><label for='rb2'>N&atilde;o</label></p></div></div></div></div>");
      
            $('#tbItQst').append('<tr id="addr'+(i+1)+'"></tr>');
            i++; 
          });
          
          $("#btDelRow").click(function(){
          	   if (i>1) {
      		        $("#addr"+(i-1)).html('');
      		        i--;
      		     }
	        });
  
      });   
      
             

 
 <table id="tbItQst">                    
    <tr id='addr0'>
                      
                     
       <div class="row">
         <div class="input-field col s7">                                                      			                        	  
           <input type="text" name="item_pergunta" id="item_pergunta">
           <label for="item_pergunta">Descri&ccedil;&atilde;o do Item</label>                                                                      </div>
                          
         <div class="input-field col s5">
           <label>Correta?</label>
                         
           <p style="display:inline; margin-left: 50px">
              <input class="with-gap" name="group1" type="radio" id="rb1"  />
              <label for="rb1">Sim</label>
                              
             <input class="with-gap" name="group1" type="radio" id="rb2"  />
             <label for="rb2">N&atilde;o</label>
           </p>                            
       </div>                     
    </div>                                                             
                     
                     
      <tr id='addr1'></tr>
                     
 </table>
 
  <div class="col s10">                           
       <button type="button" id="btAddRow" class="waves-effect waves-light btn green">
           <i class="material-icons left">add</i> adicionar item
       </button>
       <button type="button" id="btDelRow" class="waves-effect waves-light btn grey">
             <i class="material-icons left">cancel</i> eliminar item
       </button>
</div>    

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Answer 1

Changes this line to:

$('#addr'+i).html("#'"+(i+1)+"' <div class='row'><div class='input-field col s7'><input type='text' name='item_pergunta["+i+"]' id='item_pergunta'><label for='item_pergunta'>Descri&ccedil;&atilde;o do Item</label> </div><div class='input-field col s5'><label>Correta?</label><p style='display:inline; margin-left: 50px'><input class='with-gap' name='group"+i+"' type='radio' id='rb1'  /><label for='rb1'>Sim</label><input class='with-gap' name='group"+i+"' type='radio' id='rb2'  /><label for='rb2'>N&atilde;o</label></p></div></div></div></div>");

By the way you should Organize your code using jquery example

var div = $("<div></div>, {"name":"div","id":"12345",[..]});

then you use

$('#div1).append(div);

in my previous experiences the code gets cleaner! I hope I helped!

fiddle working: https://jsfiddle.net/yj2ewrdv/