<div id="hoursList" class="hours__list"></div>

I will put some html tag inside to this class "hours_list".

function booking_hours(hourArray) {
  console.log("heyyyy");

  var table;
  for (var i = 0; i < hourArray.length; i++) {
    // if (parseInt(hourArray[i].childNodes[0].nodeValue) < 9)
    table +=
      "<div data-hours='0" +
      hourArray[i].childNodes[0].nodeValue +
      ".00-0" +
      (parseInt(hourArray[i].childNodes[0].nodeValue) + 1) +
      ".00' class='hour_cell'>" +
      "<p>" +
      "0" +
      hourArray[i].childNodes[0].nodeValue +
      ".00 - 0" +
      (parseInt(hourArray[i].childNodes[0].nodeValue) + 1) +
      ".00" +
      "</p></div>";
 }
  document.getElementById("hoursList").innerHTML = table.slice(9);
}

This function works with this action.

function xhttp() {
  // Create an XMLHttpRequest object
  const xhttp = new XMLHttpRequest();
  var hourArray;
  // Define a callback function
  xhttp.onload = function () {
    var parser, xmlDoc;
    var text = this.responseText;
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(text, "text/xml");
    hourArray = xmlDoc.getElementsByTagName("item");
    booking_hours(hourArray);
  };
  // Send a request
  xhttp.open("GET", "hours.xml");
  xhttp.send();
}

Everything is ok, until now. But The problem is this " $(".hour_cell").click(function ()". This function doesn't work. I tested with consol.log but I couldn't see this message. So how can I solve this problem? Please, help me, I want to le

// Onclick hour cell
$(document).ready(function () {
  $(".hour_cell").click(function () {
    var th = $(this).data().hours.slice(0, 2);
    console.log("H E R E");

    for (var i = 0; i < counterReservedHours; i++) {
      if (i + 1 == counterReservedHours && reservedHours[i] != th) {
        counterReservedHours++;
        reservedHours[i] = th;
        break;
      } else if (reservedHours[i] == th) {
        reservedHours.splice(reservedHours.indexOf(th), 1);
        counterReservedHours--;
        break;
      }
    }
    $(this).toggleClass("isSelected");
  });
});