Сгенерировать массив элементов внутри div с помощью JS / PHP

Question

Я работаю над туристическим сайтом, где у пользователей есть возможность спланировать свою поездку. Им будет предустановлено поле ввода, в котором они смогут выбрать, сколько дней продлится их поездка. Однако я изо всех сил пытаюсь понять, как создать массив элементов, соответствующий количеству дней, которые они выбирают. Например, если они выберут «4» дня, то появятся 4 поля с уникальными заголовками и кнопками. Я открыт для работы в php или javascript, спасибо за помощь!

Пример того, что должен производить код. Jsfiddle

<input type="number"> <!-- input days -->

    <div class="container"> <!-- Bootstrap Container -->
<div class="row"> <!-- Bootstrap Row -->
   <div class="col" style="background-color: red; height: 6em;"> <!-- Day container -->
      <h1 class="title">Day 1</h1> <!-- Title with UNIQE name -->
      <button>Select trip</button> <!-- Button -->
   </div> <!-- End of day container -->
   <div class="w-100" style="height: 2em;"></div> <!-- Spacing -->


   <div class="col" style="background-color: red; height: 6em;">
      <h1 class="title">Day 2</h1>
      <button>Select trip</button>
   </div>
   <div class="w-100" style="height: 2em;"></div>

   <div class="col" style="background-color: red; height: 6em;">
      <h1 class="title">Day 3</h1>
      <button>Select trip</button>
   </div>
   <div class="w-100" style="height: 2em;"></div>
   
   <div class="col" style="background-color: red; height: 6em;">
      <h1 class="title">Day 4</h1>
      <button>Select trip</button>
   </div>

</div> <!-- End of row -->
</div> <!-- End of container -->

Answer 1

Вы можете использовать insertAdjacentHTML для создания формы, пожалуйста, взгляните на пример ниже:

document.getElementById('gen').addEventListener('click', function() {
  var days = document.getElementById('days').value;
  var trips = document.getElementById('trips');
  trips.innerHTML = '';
  for (let i=0; i<days; i++) {
    trips.insertAdjacentHTML('beforeend', '<div id="day'+(i+1)+'"><h1 class="title">Day '+(i+1)+'</h1><button>Select Trip</button></div>');
  }
});

<input type="text" id="days" style="width:20px;" value="1"><button id="gen">Enter</button>
<div id="trips"></div>