Estoy creando una función Ajax para implementar funcionalidades de búsqueda y la función de búsqueda funciona bien, pero en caso de success: función . Estoy tratando de agregar una clase en todo el elemento buscado , pero la clase está agregando en cada elemento.

 $('#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>

En Inspeccionar elemento , muestra <div id="tags-browser" class="grid-layout"> en cada elemento como:

 <div id="tags-browser" class="grid-layout"> <div class="mySearchedTags"> .... .... .... <div id="tags-browser" class="grid-layout"> <div class="mySearchedTags"> .... .... ....

Pero estoy tratando de agregar solo en la parte superior como:

 <div id="tags-browser" class="grid-layout"> <div class="mySearchedTags"> .... .... <div class="mySearchedTags"> .... .... <div class="mySearchedTags"> .... .... </div>

Lo he intentado muchas veces, pero todavía se está agregando en cada elemento.