Как присвоить id новому элементу?

Question

edshander @edshander

JavaScript

Как присвоить id новому элементу?

Как присвоить id новому элементу, вставленному из template?

HTML

<template id="popupGuest">
  <div class="popup__wrapper popup__guest animate_animated animate__fadeInRight">
    <button class="popup__close-btn" id>
      <svg class="close-svg">
        <use xlink:href="../assets/sprites/assets/sprites/sprite.svg#close"></use>
      </svg>
    </button>
    <div class="popup__left">
      <svg class="people-svg">
        <use xlink:href="../assets/sprites/assets/sprites/sprite.svg#people"></use>
      </svg>
    </div>
    <div class="popup__right">
      <p class="popup__content">
        Количество посетителей на сайте:
      </p>
      <p class="popup__count">172</p>
    </div>
  </div>
</template>

<template id="popupCallback">
  <div class="popup__wrapper popup__callback animate_animated animate__fadeInRight">
    <button class="popup__close-btn" id>
      <svg class="close-svg">
        <use xlink:href="../assets/sprites/assets/sprites/sprite.svg#close"></use>
      </svg>
    </button>
    <div class="popup__left">
      <svg class="callback-svg">
        <use xlink:href="../assets/sprites/assets/sprites/sprite.svg#callback"></use>
      </svg>
    </div>
    <div class="popup__right">
      <p class="popup__content">
        Ольга М. сделала заявку на обратный звонок
      </p>
    </div>
  </div>
</template>

<template id="popupSale">
  <div class="popup__wrapper popup__sale animate_animated animate__fadeInRight">
    <button class="popup__close-btn" id>
      <svg class="close-svg">
        <use xlink:href="../assets/sprites/assets/sprites/sprite.svg#close"></use>
      </svg>
    </button>
    <div class="popup__left">
      <svg class="sale-svg">
        <use xlink:href="../assets/sprites/assets/sprites/sprite.svg#sale"></use>
      </svg>
    </div>
    <div class="popup__right">
      <p class="popup__content">
        Ольга М. только что совершила покупку на сумму 5 600 руб.
      </p>
    </div>
  </div>
</template>

<div class="popup"></div>

const popupContainer = document.querySelector('.popup');

const popupGuest = document.querySelector('#popupGuest');
const popupCallback = document.querySelector('#popupCallback');
const popupSale = document.querySelector('#popupSale');

let popups = [
  popupGuest,
  popupCallback,
  popupSale
];

const renderPopup = () => {
  let popup;
  let id = "id" + Math.random().toString(16).slice(2);

  const getPopup = (popupsArray) => {
    let random = Math.floor(Math.random() * popupsArray.length);
    return popup = popupsArray[random];
  };

  getPopup(popups);

  const popupItem = popup.content.cloneNode(true);
  popupContainer.append(popupItem);
  
};
renderPopup()
//const renderInterval = setInterval(renderPopup, 10000);