I am making a registration form that has the Add more fields link and when the person clicks on it, multiplies the form fields. One of these form fields are 2 radios buttons, which are "Yes () No children" , and when you click to add more fields to the selection that is in Yes (by default) it disappears and goes to the field that was added; and if I click to select the radio button from above, it goes out from the bottom and goes to the top, so among the 4 radio buttons I have on the form, I can only select 1. The name of the radiobuttons is like this name="children []" but they are not working.
jQuey code (multiplied)
<script> $("a#adicionarMaisCampos").on('click', function(){
var html = '<tr><td> </td><td> </td></tr><tr><td>Nome</td><td><input type="text" name="nome[]" class="form-control"></td></tr><tr><td>Data de aniversário:</td><td><input type="text" name="nascimento[]" class="form-control" placeholder="Somente o dia e mês. ex: 12/04"></td></tr><tr><td>Filhos:</td><td><input type="radio" name="filhos[]" value="1">Sim <input type="radio" name="filhos[]" value="2" checked> Não</td></tr><tr><td>Profissão:</td><td><input type="text" name="profissao[]" class="form-control"></td></tr><tr><td>Sexo</td><td><input type="radio" name="sexo[]" value="1" checked> Masculino<input type="radio" name="sexo[]" value="2"> Feminino</td></tr><tr><td>Email:</td><td><input type="email" name="email[]" class="form-control"></td></tr><tr><td>Celular:</td><td><input type="text" name="celular[]" class="form-control"></td></tr><tr><td>Cargo:</td><td><input type="text" name="cargo[]" class="form-control"></td></tr>';
$("#more").after(html);
}); </script>
HTML
<tr>
<td>Nome</td>
<td><input type="text" name="nome[]" class="form-control"></td>
</tr>
<tr>
<td>Data de aniversário:</td>
<td><input type="text" name="nascimento[]" class="form-control" placeholder="Somente o dia e mês. ex: 12/04"></td>
</tr>
<tr>
<td>Filhos:</td>
<td><input type="radio" name="filhos[]" value="1">Sim <input type="radio" name="filhos[]" value="2" checked> Não</td>
</tr>
<tr>
<td>Profissão:</td>
<td><input type="text" name="profissao[]" class="form-control"></td>
</tr>
<tr>
<td>Sexo</td>
<td>
<input type="radio" name="sexo[]" value="1" checked> Masculino <input type="radio" name="sexo[]" value="2"> Feminino
</td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email[]" class="form-control"></td>
</tr>
<tr>
<td>Celular:</td>
<td><input type="text" name="celular[]" class="form-control"></td>
</tr>
<tr id="more">
<td>Cargo:</td>
<td><input type="text" name="cargo[]" class="form-control"></td>
</tr>
<tr>
<td> </td>
<td><a href="javascript:void(0);" id="adicionarMaisCampos"><i class="fa fa-plus"></i> Adicionar mais campos</a></td>
</tr>