How to get to the desired item?

I have
two identical block
<div class="bx-filter-parameters-box-title" onclick="smartFilter.hideFilterProps(this)">
 <span class="bx-filter-parameters-box-hint ">Brand
 <i data-role="prop_angle" class="fa fa-angle-up"></i>
</span>
</div>

and
<div class="bx-filter-parameters-box-title" onclick="smartFilter.hideFilterProps(this)">
 <span class="bx-filter-parameters-box-hint ">View
 <i data-role="prop_angle" class="fa fa-angle-up"></i>
</span>
</div>

I need to click on the button outside this block was replaced by the inscription only "Brand name", and clicking on another button changed the inscription only "Views"
How do I specify what this element you need to change the html, given that there are identical classes?
March 23rd 20 at 19:33
2 answers
March 23rd 20 at 19:35
If you don't want to change class names or add the accessory, then use pseudo-classes: :first-child, :last-child, :nth-child(expression) and other.

In other words, the first unit can be rented as:
.bx-filter-parameters-box-title:first-child

The last block:
.bx-filter-parameters-box-title:last-child
March 23rd 20 at 19:37
I think you can check the value in the tag, depending on what You use. For example, in jquery , you can achieve method text() of it.
So rude

if ($('.bx-filter-parameters-box-hint').text() === 'Brand') {
$('.bx-filter-parameters-box-hint').text('Olala')
}


You may need the html() jquery is already badly I remember

Find more questions by tags jQuery