Having a dynamically generated list of elements, each structured like this:
<div class="under-item-description">
<span class="under-compare-price">100</span><span class="under-price">50</span>
<span class="under-compare-price-2">200</span><span class="under-price-2">100</span>
<div class="under-quantity">
<label class="under-quantity-button">
<input type="radio" checked="checked" name="quantity-1" class="under-quantity-radio" value="1"/>
</label>
<label class="under-quantity-button">
<input type="radio" name="quantity-2" class="under-quantity-radio" value="2"/>
</label>
</div>
</div>
The number of .under-item-description divs displayed on the page may vary. Currently, four instances are visible.
My goal is to show the .under-compare-price and .under-price when the user selects the first checkbox (name="quantity-1") within a specific .under-item-description div, while hiding .under-compare-price-2 and .under-price-2.
If the second checkbox (name="quantity-2") is selected, then .under-compare-price-2 and .under-price-2 will be shown, while .under-compare-price and .under-price will be hidden in that particular .under-item-description div.
This is my current JavaScript code:
$('.under-quantity-button').click(function(){
$('.under-quantity-radio').each(function(){
if($(this).is(':checked')){
$('.under-compare-price:eq('+$(this).parents('.under-item-description').index()+'), .under-price:eq('+$(this).parents('.under-item-description').index()+')').show();
$('.under-compare-price-2:eq('+$(this).parents('.under-item-description').index()+'), .under-price-2:eq('+$(this).parents('.under-item-description').index()+')').show();
}
});
});
However, it does not work as intended. The prices appear on the 1st and 3rd elements regardless of which second checkbox is clicked, and they do not switch back when the first checkbox is selected elsewhere. Any suggestions?