<h3>Multiple images</h3>

<div class="wrap">
  <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4Y5jq?ver=ac72&q=90&m=6&h=201&w=358&b=%23FFFFFFFF&l=f&o=t&aim=true" alt="Example Image Caption 1" class="demo-img">
  <span id="here"></span>
</div>

<div class="wrap">
  <img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/gldn-M365-CP-Microsoft365-Commercial?wid=380&hei=213&fit=crop" alt="Example Image Caption 2" class="demo-img">
  <span id="here"></span>
</div>
.wrap {
  margin-bottom: 10px;
}
.demo-img {
  width: 280px;
}
span#here {
  display: block;
}
// Method 1: Loop over the images and set the text in the loop
$(".wrap img").each(function (_, img) {
  const alt = img.alt;
  $(img).next("span").text(alt);
});

// Method 2: Select the spans and reference the image
/*
$(".wrap span").text(function () {
  return $(this).prev("img").attr("alt");
});
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js