How can I highlight the span(class="tiny") element individually when its containing div is active or clicked?
I have attempted to highlight the tiny span element without success, as only the entire div was highlighted. Here's the code snippet I've tried:
$('.main-class').on('click', '.row-fluid', function() {
$(this).parent().find('.tiny').css('background-color', '');
$(this).css('background-color', '#00fff0');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="main-class">
<div class="panel-body" style="border: 1px solid black;margin: 5px;">
<div class="row-fluid">
<a>
<h1>One</h1>
</a>
<div class="col-md-1">
<span>I am up</span><br>
<span class="tiny">ID no -123395</span>
</div>
<div rel="tooltip" style="display: flex; justify-content: flex-end;">
<div class="radio">
<label class="lead">
<input id="1" name="one" required="required" value="yes" type="radio">
Yes
</label>
<div class="radio">
<label class="lead">
<input id="1" name="one" required="required" value="No" type="radio">
No
</label>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="panel-body" style="border: 1px solid black;margin: 5px;">
<div class="row-fluid">
<a>
<h1>Two</h1>
</a>
<div class="col-md-1">
<span>I am up</span><br>
<span class="tiny">ID no -123987</span>
</div>
<div rel="tooltip" style="display: flex; justify-content: flex-end;">
<div class="radio">
<label class="lead">
<input id="1" name="one" tabindex="1" required="required" value="yes" type="radio">
Yes
</label>
<div class="radio">
<label class="lead">
<input id="1" name="one" tabindex="1" required="required" value="No" type="radio">
No
</label>
</div>
</div>
</div>
</div>
</div>
</div>I want to specifically highlight only the span class="tiny" values when any elements in class="panel-body" are activated.