You are creating a table but didn’t add the tag , so it isn’t being added as a table in your html, just as texts, so if you surround your html in it will work.

$(".date").each(function () {
  $(this).click(function () {
    $(".date").removeClass("on");
    $(this).addClass("on");
  });
});

.date {
  width: 20px;
  background-color: red;
  cursor: pointer;
}

.date.on {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td class="date">3</td>
    <td class="date">4</td>
  </tr>
  <tr>
    <td>12</td>
    <td class="date">13</td>
    <td class="date">14</td>
    <td class="date">15</td>
    <td class="date">16</td>
    <td class="date">17</td>
    <td class="date">18</td>
  </tr>
  <table>

you can use the find() method

<table>
    <tbody class="table">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td>1</td>
        <td>2</td>
        <td class="date">3</td>
        <td class="date">4</td>
      </tr>
      <tr>
        <td>12</td>
        <td class="date">13</td>
        <td class="date">14</td>
        <td class="date">15</td>
        <td class="date">16</td>
        <td class="date">17</td>
        <td class="date">18</td>
      </tr>
    </tbody>
  </table>

$('.table').on('click','.date',function () {
  $(this).parents('.table').find('.date').removeClass("on");
  $(this).addClass("on");
})

I added the <table> from your code so it would work correctly.

And based on your comment, what I did was removing all the .on classes from the elements that have the .date class, you can change that selector if you need to be more specific for example only a certain table you can put a class to the table and then modify the selector to be ".table-class .date"

$(".date").each(function() {
  $(this).click(function() {
    $(".date").removeClass("on");
    $(this).addClass("on");
  });
});

.date {
  width: 20px;
  background-color: red;
  cursor: pointer;
}

.date.on {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td class="date">3</td>
    <td class="date">4</td>
  </tr>
  <tr>
    <td>12</td>
    <td class="date">13</td>
    <td class="date">14</td>
    <td class="date">15</td>
    <td class="date">16</td>
    <td class="date">17</td>
    <td class="date">18</td>
  </tr>
  <table>

If I click ‘.date‘ class, I want to add class ‘.on‘ in ‘.date‘ class.
And, delete ‘.on‘ class from other ‘.date‘ class.

here is my code:

HTML:

  <tbody>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>1</td>
                  <td>2</td>
                  <td class="date">3</td>
                  <td class="date">4</td>
                </tr>
                <tr>
                  <td>12</td>
                  <td class="date">13</td>
                  <td class="date">14</td>
                  <td class="date">15</td>
                  <td class="date">16</td>
                  <td class="date">17</td>
                  <td class="date">18</td>
                </tr>
</tbody>

JavaScript:

$(".date").each(function () {
        $(this).click(function () {
          $(this).addClass("on");
          $(this).siblings().removeClass("on");
        });
      });