Ajax success function class is adding on every element-CodePudding

I am building a ajax function to implement search functionalities and 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" >
        <div >
            <div >
                <div >
                    <a href="/answers/tag/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" > 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. Any help would be much Appreciated. Thank You in advance.

CodePudding user response：

Try this

$('#tags_list').prepend(`<div id="tags-browser" >
  ${response.results.map(({tagName}) => `<div >
            <div >
                <div >
                    <a href="/answers/tag/tag"  >${tagName}</a>
                </div>
            </div>
        </div>`).join("")}
    </div>`)