Update Multiple Element Attributes and Content Dynamically

// HTML Structure
/*
<figure>
  <img id="dynamicImage" src="https://via.placeholder.com/150/FF5733/FFFFFF?text=Initial+Image" alt="Initial Placeholder Image">
  <figcaption id="imageCaption">A simple placeholder image.</figcaption>
</figure>
<button id="updateImageBtn">Update Image</button>
*/

const dynamicImage = document.getElementById('dynamicImage');
const imageCaption = document.getElementById('imageCaption');
const updateImageBtn = document.getElementById('updateImageBtn');

let imageCounter = 1;

if (dynamicImage && imageCaption && updateImageBtn) {
  updateImageBtn.addEventListener('click', () => {
    imageCounter++;
    const newSrc = `https://via.placeholder.com/200/33FF57/000000?text=Updated+Image+${imageCounter}`;
    const newAlt = `Dynamically updated image number ${imageCounter}`;
    const newTitle = `Image ${imageCounter} loaded`;
    const newCaptionText = `This is image number ${imageCounter} from the dynamic update.`;

    // Update attributes
    dynamicImage.setAttribute('src', newSrc);
    dynamicImage.setAttribute('alt', newAlt);
    dynamicImage.setAttribute('title', newTitle); // Custom attribute or standard

    // Update content of a sibling element
    imageCaption.textContent = newCaptionText;

    // Example of removing an attribute
    if (imageCounter % 2 === 0) {
        dynamicImage.removeAttribute('data-custom-attribute');
    } else {
        dynamicImage.setAttribute('data-custom-attribute', 'info-added');
    }

    console.log('Image and caption updated.');
  });
}