Can anyone help me with this problem I'm stuck and I don't know what to do. I have here the radio button I can select in one form but when I add another form then check the radio button the check will transfer to other radio button which I added. Here is the code
$("#ha").click(function() {
var tayo = "";
tayo += '<div class="row">';
tayo += '<div class="col-lg-12">';
tayo += '<select class="handicap">';
tayo += '<option value="">Select<\option>';
tayo += '<option value="cb">TRUE or FALSE</option>';
tayo += '</select>';
tayo += '<div class="ahhh">';
tayo += '<div class="inputs"></div>';
tayo += '</div>';
tayo += '</div>';
tayo += '</div>';
$("#cardsss").append(tayo);
bindEvent();
});
function bindEvent() {
$('.handicap').change(function(e) {
var val = $(this).val();
if (val == "cb") {
$(e.target).next('.ahhh').html('<br><div class="inputs"><input type="radio" name="true_false[]" value="true">TRUE<input type="radio" name="true_false[]" value="false">FALSE</div>');
}
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="cardsss">
<div class="row">
<div class="col-lg-12">
<select class="handicap">
<option>Select</option>
<option value="cb">TRUE or FALSE</option>
</select>
<div class="ahhh">
<div class="inputs"></div>
</div>
</div>
</div>
</div>
<a id="ha" class="fa fa-clone"></a>$('#cardsss').on('change', '.handicap', function(e) {
var val = $(this).val();
if (val == "cb") {
$(e.target).next('.ahhh').html('<br><div class="inputs"><input type="radio" name="true_false[]" value="true">TRUE<input type="radio" name="true_false[]" value="false">FALSE</div>');
}
});
$('#cardsss').on('click', '.ahhh input', function(e) {
console.log($(this).val());
});
$("#ha").on("click", function() {
const tayo = $("#cardsss div").eq(0).clone()
$("#cardsss").append(tayo);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="cardsss">
<div class="row">
<div class="col-lg-12">
<select class="handicap">
<option value="">Please select</option>
<option value="cb">TRUE or FALSE</option>
</select>
<div class="ahhh">
<div class="inputs"></div>
</div>
</div>
</div>
</div>
<a id="ha" class="fa fa-clone"></a>