I'm facing an issue while trying to select an element that is positioned above another element. Specifically, I want to target the nearest occurrence of the .discount-dropdown class that appears above the .discount-type class. Can anyone help me figure out what mistake I might be making?
Here's an example of the HTML code (multiple instances):
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle discount-dropdown" data-toggle="dropdown" aria-expanded="false">$ <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right adjustment-dropdown" role="menu">
<li><a class="discount-type">$</a></li>
<li><a class="discount-type">%</a></li>
</ul>
</div>
And here's the corresponding jQuery code:
$('.discount-type').on('click', function(event){
$sign = $(this).html().substr(0,1);
$parentElement = $(this).closest('.discount-dropdown').html(); //unsure why this isn't functioning
$newHtml = $sign + $parentElement.substr(1);
alert($newHtml);
});