My goal is to switch the class of the #klapp element (from .klapp to .klappe) whenever a click event happens inside the #label-it container, including when the #klapp element itself is clicked. The challenge is that I am not able to use unique IDs for each element.
$('#label-it').click(function() {
$(this).next(".filter-panel").toggleClass('klapp');
$(this).next(".filter-panel").toggleClass('klappe');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="label-it" class="label-it">
<label class="filter-panel">
<div id="klapp" class="klapp"></div>
</label>
</div>
<div id="label-it" class="label-it">
<label class="filter-panel">
<div id="klapp" class="klapp"></div>
</label>
</div>
<div id="label-it" class="label-it">
<label class="filter-panel">
<div id="klapp" class="klapp"></div>
</label>
</div>
<div id="label-it" class="label-it">
<label class="filter-panel">
<div id="klapp" class="klapp"></div>
</label>
</div>Initially, I attempted the following approach, but it only affected the first #klapp element inside the #label-it container:
$('#label-it').click(function(){
$("#klapp").toggleClass('klapp');
$("#klapp").toggleClass('klappe');
});