How to assign image url dynamically using $.map in jquery

How to assign image tag attributes data dynamically using $.map loop below is my html and jquery code.

html:-

<div class="justify-content-center">
  <div class="icons">
    <i class='chart-icon'>
      <img src="" alt="">
    </i>
  </div>
  <span></span>
</div>

<div class="justify-content-center">
  <div class="icons">
    <i class='chart-icon'>
      <img src="" alt="">
    </i>
  </div>
  <span></span>
</div>

<div class="justify-content-center">
  <div class="icons">
    <i class='chart-icon'>
      <img src="" alt="">
    </i>
  </div>
  <span></span>
</div>

jquery code:-

($.map(algoimg, function (item) {

    $(".justify-content-center").find("img").attr("src", item.ImageURL).attr("alt", item.StrategyName);
    $(".justify-content-center").find("span").html(item.StrategyName);       

}));

In the above jQuery logic is working fine and the item.ImageURL will give the unique image url to each justify-content-center class div img but the problem is each justify-content-center class img url is taking the last image url to each justify-content-center class. Can you please suggest me where I did the mistake here

Sorry for my bad English and if any code required I will share.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/fDqtxLw