Производить Шаблон HTML

У меня есть следующий код, чтобы показывать модальные окна, которые я хочу использовать в моем проекте.

Нет ни у какой проблемы, только, что я должен включать более 40 манер, это способствует тому, чтобы мой файл превзошел три тысячи линий.

Это основные манеры Bootstrap 3, повторяют n разы как код манер, так и код этикеток <a> что открывают их, единственное, что они меняют, - идентификации или href и внутренний контент каждого модального.

<!--Mapa1-->
<div class="col-sm-4 text-center">
  <div class="blog-inner">
    <a href="#modal1" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
    <div class="desc">
      <h3><a href="#modal1" data-toggle="modal">Sede Colombia</a></h3>
    </div>
  </div>
</div>

<!--Mapa2-->
<div class="col-sm-4 text-center">
  <div class="blog-inner">
    <a href="#modal2" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
    <div class="desc">
      <h3><a href="#modal2" data-toggle="modal">Sede Seul</a></h3>
    </div>
  </div>
</div>


<!-- Modal 1-->
<div class="portfolio-modal modal fade" id="modal1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-content">
    <div class="close-modal" data-dismiss="modal">
      <div class="lr">
        <div class="rl">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
          <div class="modal-body">
            <h2>Sede Principal Colombia</h2>
            <hr><br>
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728" width="800" height="400" frameborder="0"
              style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
            <br><br>
            <hr>
            <p><b>Dirección:</b> Bogotá - Colombia
              <br>
              <b>Teléfonos:</b> (2) 123 4567
            </p>
            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2-->
<div class="portfolio-modal modal fade" id="modal2" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-content">
    <div class="close-modal" data-dismiss="modal">
      <div class="lr">
        <div class="rl">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
          <div class="modal-body">
            <h2>Sede Administrativa Seul</h2>
            <hr><br>
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728" width="800" height="400" frameborder="0"
              style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
            <br><br>
            <hr>
            <p><b>Dirección:</b> Seul - Corea del Sur
              <br>
              <b>Teléfonos:</b> (2) 123 4567
            </p>
            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

То, что я хочу, состоит в том, чтобы отлаживать этот код, чтобы избегать повторять код так, что главным образом тот же самый.

У меня есть несколько идей, первое состоит в том, чтобы использовать php с двумя includes кода, который повторяется, немного как это более или менее.

/* modal-start.php */

<div class="modal-content">
  <div class="close-modal" data-dismiss="modal">
    <div class="lr">
      <div class="rl">
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2">
        <div class="modal-body">


          /* modal-end.php */

          <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar</button>
        </div>
      </div>
    </div>
  </div>
</div>
</div>


<!--Mapa1-->
<div class="col-sm-4 text-center">
  <div class="blog-inner">
    <a href="#modal1" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
    <div class="desc">
      <h3><a href="#modal1" data-toggle="modal">Sede Colombia</a></h3>
    </div>
  </div>
</div>

<!--Mapa2-->
<div class="col-sm-4 text-center">
  <div class="blog-inner">
    <a href="#modal2" data-toggle="modal"><img class="img-responsive" src="https://picsum.photos/400/200" alt="Mapa"></a>
    <div class="desc">
      <h3><a href="#modal2" data-toggle="modal">Sede Seul</a></h3>
    </div>
  </div>
</div>


<!-- Modal 1-->
<div class="portfolio-modal modal fade" id="modal1" tabindex="-1" role="dialog" aria-hidden="true">

  <?php include 'modal-start.php'; ?>

  <h2>Sede Principal Colombia</h2>
  <hr><br>
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728" width="800" height="400" frameborder="0"
    style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
  <br><br>
  <hr>
  <p><b>Dirección:</b> Bogotá - Colombia
    <br>
    <b>Teléfonos:</b> (2) 123 4567
  </p>

  <?php include 'modal-end.php'; ?>

  <!-- Modal 2-->
  <div class="portfolio-modal modal fade" id="modal2" tabindex="-1" role="dialog" aria-hidden="true">

    <?php include 'modal-start.php'; ?>

    <h2>Sede Administrativa Seul</h2>
    <hr><br>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12420.601524132726!2d-77.0365298!3d38.8976763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x715969d86d0b76bf!2sCasa+Blanca!5e0!3m2!1ses!2sco!4v1543869223728" width="800" height="400" frameborder="0"
      style="border:0;width: -webkit-fill-available;" allowfullscreen></iframe>
    <br><br>
    <hr>
    <p><b>Dirección:</b> Seul - Corea del Sur
      <br>
      <b>Teléfonos:</b> (2) 123 4567
    </p>

    <?php include 'modal-end.php'; ?>

Я не думаю, что очень практический этот метод ни очень ортодоксально.

Он мог бы делать это также с Javascript, но я не уверена, если он смог включать весь код html в inner, нечто похожее:

document.getElementById("demo").innerHTML = " <div class="modal-content"> 
<div class="close-modal" data-dismiss="modal"> 
<div class="lr"> 
<div class="rl"> 
</div> 
</div> 
</div> 
<div class="container"> 
<div class="row"> 
<div class="col-lg-8 col-lg-offset-2"> 
<div class="modal-body">";

В точку, что я хочу прибыть, он состоит в том, что я не хочу изобрести колесо заново, если уже существует функция или параметр, который позволял бы мне автоматизировать этот copy/paste и предотвращать повторение кода, я был бы совершенным.

Большое спасибо!