اضافه کردن div های تو در تو با جی کوئری

سلام. من یک اسلایدر عکس دارم که شامل چندین تصویر هست…هدفم اینه که داخل div یکی از این تصاویر اسلایدر، یک بلوک اضافه کنم…از کدهای زیر استفاده میکنم اما خروجی ندارم.
۱) قسمتی از اسلایدر

<div id="st_swiper_block_55">
<img class="st_swiper_image" src="https://dev.g2kala.com/upload/stswiper/1slide.jpg" alt=""width="2000" height="750">  
 </div>

۲-۱) div های مورد نظر برای اضافه شدن بعد  از تگ img

<div class="hot-spot" x="300" y="43">
            <div class="circle"></div>
            <div class="tooltip">
                <div class="img-row">
                    <img src="https://picsum.photos/170/128/?random">
                </div>
            </div>
</div>

۲-۲) کد اضافه شده توسط جی کوئری:

$(document).ready(function() {
  var divnested = '<div class="hot-spot" x="300" y="43"><div class="circle"></div><div class="tooltip"><div class="img-row"><img src="https://picsum.photos/170/128/?random" alt="Jurong Lake Gardens #1"  width="170" height="128"></div></div></div>';
  $("#st_swiper_block_55").append(divnested);
});