Not able to get the dynamically added radio button child with eq()

Question

How to get the ID of the last radio button which is added dynamically, after the DOM is loaded

 jQuery(document).on("click", ".create-wishlist-items li.wish-item", function() { var thisItem = jQuery(this).index(); jQuery('#itoris-wishlist-radiostack div').eq(thisItem).children('.itoris-wishlist-radio').click(); jQuery('.itoris-wishlist-button-select').click(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="itoris-wishlist-radiostack"> <div> <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1020" id="itoris-wishlist-radio-1020" alt="Chezil" type="radio"> <label for="itoris-wishlist-radio-1020">radio 1</label> </div> <div> <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1021" id="itoris-wishlist-radio-1021" alt="alt1" type="radio"> <label for="itoris-wishlist-radio-1021">radio 2</label> </div> <div> <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1019" id="itoris-wishlist-radio-1019" checked="checked" alt="Main" type="radio"> <label for="itoris-wishlist-radio-1019">radio 3</label> </div> </div>

Answer 1

You can use jQuery('.radio-wrap input').last().attr('id');

See the added snippet for reference.

 var c = 4; function addRadio(){ jQuery('.radio-wrap').append('<input type="radio" id="'+ c +'" value="4">'); c++; } function getLast(){ var elID = jQuery('.radio-wrap input').last().attr('id'); console.log(elID); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" onclick="addRadio()"> Add radio </button> <div class="radio-wrap"> <input type="radio" id="1" value="1"> <input type="radio" id="2" value="2"> <input type="radio" id="3" value="3"> </div> <button onclick="getLast()">Get Last</button>

Answer 2

 //create new element (div) for #itoris-wishlist-radiostack var new_div=$('<div/>'); //create new radio for this div var new_input=$('<input/>'); new_input.attr({'type':'radio', 'class':'itoris-wishlist-radio','name':'itoris-wishlist-radio', 'value':'1022', 'id':'itoris-wishlist-radio-1022'}); //add raddio into div new_div.append(new_input); //create new label for this div var new_label=$('<label/>'); new_label.attr({'for':'itoris-wishlist-radio-1022'}).html('Test'); //add label into div new_div.append(new_label); //add new div into #itoris-wishlist-radiostack $('#itoris-wishlist-radiostack').append(new_div); //new radio button click!!! new_input.click();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="itoris-wishlist-radiostack"> <div> <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1020" id="itoris-wishlist-radio-1020" alt="Chezil" type="radio"> <label for="itoris-wishlist-radio-1020">Chezil</label> </div> <div> <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1021" id="itoris-wishlist-radio-1021" alt="Chezil1" type="radio"> <label for="itoris-wishlist-radio-1021">Chezil1</label> </div> <div> <input class="itoris-wishlist-radio" name="itoris-wishlist-radio" value="1019" id="itoris-wishlist-radio-1019" checked="checked" alt="Main" type="radio"> <label for="itoris-wishlist-radio-1019">Main</label> </div> </div>