How to change classes like schedule in html calendar tables

Heisenberg :

I have calendar like html tables.like

<td id="1">1</td> <td id="2">2</td> <td id="3">3</td> <td id="4">4</td> <td id="5">5</td> 
<td id="6">6</td> <td id="7">7</td> <td id="8">8</td> <td id="9">9</td>

I would like to change its classes like calendar schedule, if I clicked cell2,forward 3day's classes are changed.(I attached images)

①Are there any good way to realize it?

②Are there any other ways to realize schedule like expression(result image is illustrated below), except for like applying border-bottom options ?

My current attempt is like below.....

.outpatient {
    border-bottom: 3px solid yellow;
}

$(function() {
  $("td").click(function() {
    $(this).addClass('outpatient');
  });
});

image is like below.

Thanks

Mamun :

You can try using .nextAll()

Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

and :lt() selector:

Select all elements at an index less than index within the matched set.

Demo:

$(function() {
  $("td").click(function() {
    $('td').removeClass('outpatient'); //If you want to reset in each click
    $(this).nextAll(':lt(3)').addClass('outpatient');
  });
});

table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}
.outpatient {
  border-bottom: 3px solid yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="1">1</td> <td id="2">2</td> <td id="3">3</td> <td id="4">4</td> <td id="5">5</td> 
    <td id="6">6</td> <td id="7">7</td> <td id="8">8</td> <td id="9">9</td>
  </tr>
</table>