If radio button in div is clicked then corresponding radio button in other div is clicked

Question

Can someone help me with a better way to write this? So we are going to be adding to the list of levels and thumbnails and I would like this to work dynamically. So say if you selected level 15 then level 15 in the all-thumbnails div would be selected. Currently I have a script that is limited and would have to be repeated for the number of levels/thumbnails we create.

 $( "#all-levels input:eq(0)" ).click(function() { $( "#all-thumbnails input:eq(0)" ).click(); }); $( "#all-levels input:eq(1)" ).click(function() { $( "#all-thumbnails input:eq(1)" ).click(); }); 

 input {float: left;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <div id="all-levels"> <div class="level"> <div class="level-container"> <input name="level-expand" id="level-expand587" value="3587" type="radio"> </div> <label for="level-expand3587" onclick=""> <div class="level-amount-container"> $18.00 </div> <div class="level-label-container"> Chai </div> </label> </div> <div class="level"> <div class="level-container"> <input name="level-expand" id="level-expand3589" value="3589" type="radio"> </div> <label for="level-expand3589" onclick=""> <div class="level-amount-container"> $25.00 </div> <div class="level-label-container"> Classic Frame </div> </label> </div> </div> <p>&nbsp;</p> <div id="all-thumbnails"> <div class="thumbnail-container"> <label class="thumbnail-label" for="layout_id_1201"> <img src="http://www.imagemagick.org/Usage/thumbnails/thumbnail.gif" alt="Chai" border="0"> </label> <input name="layout_id" id="layout_id_1201" value="1201" type="radio"> </div> <div class="thumbnail-container"> <label class="thumbnail-label" for="layout_id_2456"> <img src="https://mediaarchive.cern.ch/MediaArchive/Video/Public/Movies/CERN/2013/CERN-MOVIE-2013-051/CERN-MOVIE-2013-051-010/CERN-MOVIE-2013-051-010-thumbnail-135x101-at-5-percent.jpg" alt="Chai" border="0"> </label> <input name="layout_id" id="layout_id_2456" value="2456" type="radio"> </div> </div> 

The current script clicks the corresponding radio button in the all-thumbnails div. Is there a way to do this without writing eq:(0), eq:(1), eq:(2) and so on so that no matter how many levels and thumbnails are added it will work dynamically?

side note : the thumbnails section will be hidden from front end users, in case that is important.

Answer 1

Well you could find position index of element which was clicked, and then just query input element from another div with the index you just got. So if you click on third element in #all-levels div , then third element in #all-thumbnails will get click as well.

$( "#all-levels input" ).on('click', function(){
    var index = $( "#all-levels input" ).index(this);
    $( "#all-thumbnails input").eq(index).click();
})