How can I approach giving each hour column created, a different hour from 9am to 5pm?

Question

I have it currently just showing 9:00am in each column for viewing purposes.

for (let i = 0; i < 8; i++) {
  var row = $('<div class="row">');
  var col1 = $('<div class="col-md-2"><p class="hour">9:00AM</p>');
  var col2 = $(`<div class="col-md-8"><textarea id=text${i} class="description" placeholder="Add your event here..."></textarea>`);        
  var col3 = $(`<div class="col-md-2"><button class="saveBtn" id=${i}><i class="fas fa-save"></i></button>`)

  row.append(col1);
  row.append(col2);
  row.append(col3);

  $(".container").append(row);
}

Answer 1

You can iterate from 9 - 17 and then convert it for AM/PM format from this post

for (let i = 9; i <= 17; i++) {
  var row = $('<div class="row">');
  var col1 = $('<div class="col-md-2"><p class="hour">' + formatAMPM(i) + '</p>');
  var col2 = $(`<div class="col-md-8"><textarea id=text${i} class="description" placeholder="Add your event here..."></textarea>`);
  var col3 = $(`<div class="col-md-2"><button class="saveBtn" id=${i}><i class="fas fa-save"></i></button>`)

  row.append(col1);
  row.append(col2);
  row.append(col3);

  $(".container").append(row);
}

function formatAMPM(hours) {
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12;
  return hours + ':00 ' + ampm;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="container"></div>