I'm having a hard time manipulating radiobutton components dynamically created when I click the button, but I'm having a small problem, when I click on the generated radiobutton, the selected component is the main component contained in the table that 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çã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ã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çã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ã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>