I have two sets of links with dynamic id's. The first set is hidden from view (display:none;). I need to make clicking on a link from the second set trigger a link click in the first set based on matching id's.
Here's my code:
HTML output
// Hidden from user
<div class="set1">
<div class="alm-filter alm-filter--taxonomy" id="alm-filter-2">
<ul>
<li><a href="javascript:void(0);" class="alm-filter--link field-radio field-test10" id="radio-test10-2">Link 1</a></li>
<li><a href="javascript:void(0);" class="alm-filter--link field-radio field-test11" id="radio-test11-2">Link 2</a></li>
</ul>
</div>
</div>
// Displayed to user
<div class="set2">
<div class="alm-filter alm-filter--taxonomy" id="alm-filter-2">
<ul>
<li><a href="javascript:void(0);" class="alm-filter--link field-radio field-test10" id="radio-test10-2">Link 1</a></li>
<li><a href="javascript:void(0);" class="alm-filter--link field-radio field-test11" id="radio-test11-2">Link 2</a></li>
</ul>
</div>
</div>
My Jquery thus far:
$(document).on('click', '.industry-filter-terms #alm-filter-2 .alm-filter--radio .alm-filter--link', function(event) {
event.preventDefault();
var set2LinkId = $(this).attr('id');
var set1LinkId = $( '.expertise-filter-terms #alm-filter-2 ' + myClass );
$( this ).trigger( 'click' );
});
So basically what I'm trying to do is on click of set link, get it's id, find the link in the first set with the matching id and click it. So far I can't even get var set1LinkId to come back with anything but an empty array. I'm not very experienced with sequencing events and I've looked everywhere but can't figure what to do... Help?