Q:

jQuery clone with radio

I have trouble to $_POST radio and radio selection if i use jquery clone method.
Below code i have Gender selection. If user can click on add-more link clone gender and append to same form.
HTML
<form action="test.php" method="post">
<div id="one">
    <input type="radio" name="gender" value="1" />Male<br />
    <input type="radio" name="gender"  value="2" />Female<br />
</div>
<div id="appendBefore"></div>
<a href="#" onclick="addMore();">Add More</a>
</form>

jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function addMore(){
    var copy_ = $("#one").clone();
    copy_.insertBefore('#appendBefore');
}
</script>

PHP
print_r($_POST);

Q - 1. Radio not checked properly.
Q - 2. Radio not posted properly in php.

Thanks.

A:

The issue is here:
<input type="radio" name="gender" value="1" />Male<br />
<input type="radio" name="gender"  value="2" />Female<br />

You can only check one radio with in a same group (having the same name). In your case when you clone and append the radio's, the new group is also having the same name, that's why you can only select one from all the radio's. 
To resolve this, you have to make the radio's name different for each group. Maintain a counter like thing with the name and every thing will be fine.
Ex:

<p>
Block 1
</p>
<input type="radio" name="gender1" value="1" />Male<br />
<input type="radio" name="gender1"  value="2" />Female<br />
<p>
Block 2
</p>
<input type="radio" name="gender2" value="1" />Male<br />
<input type="radio" name="gender2"  value="2" />Female<br />

JSFiddle with proposed solution

