Добавить шаблон html с javascript много раз с параметрами

Question

Я хочу добавить этот фрагмент кода в мой основной файл html много раз (насколько я понимаю, это возможно с Jquery). Но моя главная проблема заключается в том, что мне также нужно изменить некоторые 'id' элементов внутри шаблона html на основе номера добавления. Например, в первый раз, когда я добавляю шаблон, идентификатор должен быть «item1», но во второй раз это должен быть «item2». В шаблоне я хочу изменить идентификаторы: Sensor1 mac1 LastUpdate1 TempPlot1

Шаблон:

<div class="container-fluid" style="margin-top: 100px">
  <div class="alert alert-success">
    <h2 id="Sensor1">Sensor desconectado!</h2>
  </div>
  <div class="jumbotron" style="background-color: white;">
    <div class="row">
      <div class="col-mb-3" style="text-align: center; ">
        <canvas id="gauge1" style="padding-top: 2%; margin-right: 50px; min-width: 200px;"></canvas> 
        <div class="card-body" style="text-align:left;">
          <div class="container" style="margin-left: -30px;">     
            <table class="table table-hover">
              <tbody>
                <tr>
                  <td>MAC</td>
                  <td id="mac1">xx:xx:xx:xx:xx:xx</td>
                </tr>
                <tr>
                  <td>LastUpdate</td>
                  <td id="LastUpdate1">----------</td>
                </tr>
              </tbody>
            </table>
            <span class="badge badge-success" style="display: none; " id="cnt1" >Conectado</span>
            <span class="badge badge-danger" style="display: block; " id="dcnt1">Desconectado</span>
          </div>
        </div>
      </div>
      <div class="col-mb-9" style="text-align: center;">
        <div id="TempPlot1" style=" margin: auto; box-shadow: 4px 6px 15px 1px rgba(0,0,0,0.25);"></div>
      </div>
    </div>
  </div> 
</div>

<div class="modal bs-wifi1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content" style="text-align: center;">
      <div class="modal-header"><h4>WiFi INFO <i class="fas fa-wifi"></i></h4></div>
      <div class="modal-body"><p><strong>WiFi:</strong><span id="wifi1">{REDWiFI}</span></p></div>
      <div class="modal-body"><p><strong>RSSI:</strong><span id="rssi1">{RSSI}</span></p></div>
      <div class="modal-body"><p><strong>AP:</strong><span id="ap1" data-toggle="cerrar_sesion" title="Ingrese la direccion IP en su navegador para obtener mas informacion y poder configurar una nueva red WiFi.. Recuerde conectarse al mismo WiFI que figura arriba!"  data-placement="bottom" >{IP}</span></p></div>
    </div>
  </div>
</div>

<div class="modal bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header"><h4>Cerrar Sesion <i class="fa fa-lock"></i></h4></div>
      <div class="modal-body"><i class="fa fa-question-circle"></i> Estas seguro que queres cerrar sesion?</div>
      <div class="modal-footer"><a href="javascript:;" class="btn btn-primary btn-block">Cerrar Sesion</a></div>
    </div>
  </div>
</div>

Можно ли поместить шаблон в отдельный файл? или должен быть внутри js. Спасибо.

Answer 1

Используйте для l oop и литералов шаблона для динамической вставки идентификатора

Это базовый c пример, который создает 10 диапазонов с разными идентификаторами

for(let i=1;i<=10;i++)
{
  let div=document.createElement("div");
  div.innerHTML=`<span id="span${i}">Hey this is Span ${i} </span>`;
  document.body.append(div);
}