You're re-using id
values in your HTML. This is invalid markup and will likely lead to undefined behavior (probably different by browser as well). Notice this element:
<div id="hiden" class="categorry">
Since this is essentially inside a loop (repeater, datalist, etc.) it's going to render multiple times to the page. Instead of an id
, use a class
:
<div class="hiden categorry">
Then just change your jQuery selector:
$('.hiden')
Of course, now you also need to specifically identify which element you want to toggle. You can do this by traversing the DOM a little bit from the clicked element. Something like this:
$(this).closest('div').find('.hiden').toggle();
This is an example, since I don't know the rendered markup resulting from your server-side code. Essentially the selector in .closest()
should refer to whatever parent element wraps that particular datalist item in the markup. This basically looks for: The element which was clicked -> a common parent between it and the element you want to toggle -> the element you want to toggle.
(Naturally, this same fix will need to be applied anywhere else you're duplicating id
values, which you do a couple of times in your code.)
id
s have to be unique in the DOM. class
es can be re-used.