Alguien me puede ayudar con este problema estoy atascado y no se que hacer. Aquí tengo el botón de opción que puedo seleccionar en un formulario, pero cuando agrego otro formulario, luego verifico el botón de opción, la verificación se transferirá a otro botón de opción que agregué. Aquí está el código
$("#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>