$("#add_driver").click(function() {
$("#add_driver_section").replaceWith("<div class='wrap-input100 validate-input bg1 rs1-wrap-input100' ><span class='label-input100'>Gender</span><div class='contact100-form-radio m-t-15'> <input class='input-radio100' id='radio1' type='radio' name='type- product[]' value='male' checked='checked' > <label class='label-radio100' for='radio1'> Male </label></div><div class='contact100-form-radio'> <input class='input-radio100' id='radio2' type='radio' name='type-product[]' value='female'> <label class='label-radio100' for='radio2'> Female </label> </div></div>");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
<span class="label-input100">Gender</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio1" type="radio" name="type-product[]" value="male" checked="checked">
<label class="label-radio100" for="radio1">
Male
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio2" type="radio" name="type-product[]" value="female">
<label class="label-radio100" for="radio2">
Female
</label>
</div>
</div>I need to change the id of the radio button everytime this function is called.
There is no count to how many times the checkboxes will be dynamically created. I do not want a very complex code. Just something simple and easy to understand.
</div>
Just add some counter in js and use it as a number in id
var count = 3;
$("#add_driver").click(function() {
$("#add_driver_section").append("<div class='wrap-input100 validate-input bg1 rs1-wrap-input100' ><span class='label-input100'>Gender</span><div class='contact100-form-radio m-t-15'> <input class='input-radio100' id='radio" + count + "' type='radio' name='type-product[]' value='male' checked='checked' > <label class='label-radio100' for='radio" + count + "'> Male </label></div><div class='contact100-form-radio'> <input class='input-radio100' id='radio" + ++count + "' type='radio' name='type-product[]' value='female'> <label class='label-radio100' for='radio" + count + "'> Female </label> </div></div>");
count++;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
<span class="label-input100">Gender</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio1" type="radio" name="type-product[]" value="male" checked="checked">
<label class="label-radio100" for="radio1">
Male
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio2" type="radio" name="type-product[]" value="female">
<label class="label-radio100" for="radio2">
Female
</label>
</div>
</div>
<button id="add_driver">Add driver</button>
<section id="add_driver_section"></section>I hope this is what you want to achieve. If not, then let me know.
EDIT
If you want those radio buttons not to act as one radio set, then you need to give them different number.
Here is an example
var count = 3;
$("#add_driver").click(function() {
$("#add_driver_section").append("<div class='wrap-input100 validate-input bg1 rs1-wrap-input100' ><span class='label-input100'>Gender</span><div class='contact100-form-radio m-t-15'> <input class='input-radio100' id='male-radio" + count + "' type='radio' name='type-product-" + count + "[]' value='male' checked='checked' > <label class='label-radio100' for='male-radio" + count + "'> Male </label></div><div class='contact100-form-radio'> <input class='input-radio100' id='female-radio" + count + "' type='radio' name='type-product-" + count + "[]' value='female'> <label class='label-radio100' for='female-radio" + count + "'> Female </label> </div></div>");
count++;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
<span class="label-input100">Gender</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio1" type="radio" name="type-product[]" value="male" checked="checked">
<label class="label-radio100" for="radio1">
Male
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio2" type="radio" name="type-product[]" value="female">
<label class="label-radio100" for="radio2">
Female
</label>
</div>
</div>
<button id="add_driver">Add driver</button>
<section id="add_driver_section"></section></div>
$(document).ready(function(){
var i = 0;
$("#add_driver").click(function() {
i = i + 1;
$("#add_driver_section").append("<div class='wrap-input100 validate-input bg1 rs1-wrap-input100' ><span class='label-input100'>Gender</span><div class='contact100-form-radio m-t-15'> <input class='input-radio100' id='male-radio"+i+"' type='radio' name='type-product-"+i+"[]' value='male' checked='checked' > <label class='label-radio100' for='male-radio"+i+"'> Male </label></div><div class='contact100-form-radio'> <input class='input-radio100' id='female-radio"+i+"' type='radio' name='type-product-"+i+"[]' value='female'> <label class='label-radio100' for='female-radio"+i+"'> Female </label> </div></div>");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100">
<span class="label-input100">Gender</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio1" type="radio" name="type-product[]" value="male" checked="checked">
<label class="label-radio100" for="radio1">
Male
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio2" type="radio" name="type-product[]" value="female">
<label class="label-radio100" for="radio2">
Female
</label>
</div>
</div>
<div id="add_driver_section"></div>
<button id="add_driver">Add</button>Maybe you want something like this? You need to give unique name also to allow selection for each driver. Else it will update the previously selected radio button. Let me know if it works for you?
</div>