Estoy tratando de mostrar una vista previa del enlace en cada enlace con jquery, pero en realidad mi código agrega varios divs (uno para cada enlace en el cuerpo) en lugar de uno para el enlace en sí.

aquí el violín: https://jsfiddle.net/eg4zwpk9/4/

mi código hasta ahora

 this.$(".Post-body").find('a').each((i, e) => { this.$('.Post-body').attr('id', 'value'); const isMobile = navigator.userAgentData.mobile; let controller = new AbortController(); let href = e.getAttribute("href"); console.log(href) if (isMobile === false) { fetch(`https://preview-api.bbspace.top/?url=` + encodeURIComponent(href), { method: "GET", mode: "cors", signal: controller.signal, credentials: "omit" }) .then((res) => res.json()) .then((response) => { console.log(response) if (!e.text.startsWith("http")) return; let $s = $('#value a') let imgResp = '<img class="screenImg" src="' + response.image + '" width="250">'; if (response.image === undefined) { imgResp = '<img class="screenImg" src="https://www.studioippocrate.com/wp-content/uploads/2017/11/pac-404.png" width="250">'; } this.$('#value a').append('<div class="dropdown-prev">\n' + ' <button class="dropbtn"><i class="fas fa-search"></i></button>\n' + ' <div class="dropdown-content-prev">\n' + ' <div class="donContainer">\n' + ' ' + imgResp + '' + ' <div class="titleDesc">' + response.description + '</div> ' + ' </div>\n' + ' </div>\n' + '</div>'); }); } });

¿Cómo puedo mostrar solo el resultado correcto para CADA enlace?