The flight of the goods to the basket, copies of the pictures of the goods fly from only the 1st line, what could be the problem?

Question

JavaScript

There was a problem in the flight of the picture, when adding an item to the cart. There are several lines with products on the page, each line has 3 products. you press - buy, the product is added to the basket and a copy of its picture "flies" to the basket. There are no problems with the 1st line. on the 2nd line, a copy of the product image flies for some reason from the 1st line (a true copy, but from the 1st line). on the 3rd line similarly, a copy of the picture flies from the first line of goods. what could be the problem?

flight code

<script>
 id = $(this).attr("data-rel");
          tmp="#img"+id;
          $(tmp)
            .clone()


                .css({'display' : 'block', 'position' : 'absolute', 'z-index' : '11100', top: $(this).offset().top-300, left:$(this).offset().left})
                .appendTo("body")
                .animate({opacity: 0.5,
                    left: $(".bt_basket").offset()['left'],
                    top: $(".bt_basket").offset()['top'],
                    width: 0}, 1000, function() {
                    $(this).remove();
           
                });
</script>

buttons

<a class="bt_yellow to_carts list" data-rel="<?=$arItem['ID']?>">Купить</a>

                          <img id="img<?=$arItem['ID'];?>" src="<?=$img['src']?>" >

Answer 1

Replace with
$(tmp).offset().top