Currently, I am in the process of creating an Ajax function to integrate search features into my project. The search function itself is functioning properly; however, within the success: function, I am encountering an issue. Specifically, I am attempting to add a class to the entire searched element, but instead, the class is being added to every element.
$('#id_search_tag').keyup(function(e) {
$.ajax({
url: "{% url 'searchTag' %}",
data: {
'w': $('#id_search_tag').val(),
},
method: 'get',
dataType: 'json',
success: function(response) {
for (result of response.results) {
$('#tags_list').prepend(`
<div id="tags-browser" class="grid-layout">
<div class="mySearchedTags">
<div class="d-flex jc-space-between ai-center mb12">
<div class="flex--item">
<a href="/answers/tag/tag" class="post-tag" >${result.tagName}</a>
</div>
</div>
</div>
</div>
`)
}
}
})
})
<div id="tags_list">
<div id="tags-browser" class="grid-layout">
<div class="mySearchedTags">
<div class="d-flex jc-space-between ai-center mb12">
<div class="flex--item">
<a href="/answers/tag/tag" class="post-tag">{{tag}}</a>
</div>
</div>
</div>
</div>
</div>
Upon inspecting the elements, it becomes evident that
<div id="tags-browser" class="grid-layout"><div id="tags-browser" class="grid-layout">
<div class="mySearchedTags">
....
....
....
<div id="tags-browser" class="grid-layout">
<div class="mySearchedTags">
....
....
....
My objective is to apply this class only to the first element, as illustrated below:
<div id="tags-browser" class="grid-layout">
<div class="mySearchedTags">
....
....
<div class="mySearchedTags">
....
....
<div class="mySearchedTags">
....
....
</div>
Despite numerous attempts, the class is still getting added to all elements. Any insight or guidance on correcting this behavior would be greatly appreciated!