I am building an Ajax function to implement search functionalities and the search function is working fine, but on success: function I am trying to add class on whole searched element - but the class is adding on 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>

In Inspect Element it is showing <div id="tags-browser" class="grid-layout"> on every element like:

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

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

But I am trying to add only on top like:

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

    <div class="mySearchedTags">
        ....
        ....

    <div class="mySearchedTags">
        ....
        ....

</div>

I have tried many times, but it is still adding on every element