HTMLのカレンダーテーブルにスケジュールのようなクラスを変更する方法

ハイゼンベルク：

私は、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>

私は、セルをクリックした場合は、カレンダーのスケジュールのようにそのクラスを変更したい2、前方3dayのクラスが変更されている。（私は画像を添付しました）

それを実現するため①Areが何か良い方法はありますか？

②Areが式等スケジュールを実現する任意の他の方法を適用することなどを除いて、（結果画像は、以下に示されている）border-bottomオプション？

私の現在の試みは、以下のようなものです.....

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

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

画像は下記のようなものです。

感謝

Mamun：

あなたは使用して試すことができます .nextAll()

必要に応じてセレクタによってフィルタリング整合要素の組の各要素の全て次の兄弟を取得します。

そして:lt()セレクタ：

すべての要素を選択したインデックスを以下のインデックスマッチしたセット内。

デモ：

$(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>