まずは結論から

次のようなUIがあったとします。（サンプルなので、見た目はものすごくシンプルです）

[html]

<div class="my-wrapper">
  <div class="my-item-left">
    <button class="my-button" data-button="targetA">要素A</button>
    <button class="my-button" data-button="targetB">要素B</button>
    <button class="my-button" data-button="targetC">要素C</button>
    <button class="my-button" data-button="targetD">要素D</button>
    <button class="my-button" data-button="targetE">要素E</button>
  </div>
  <div class="my-item-right">
    <ul class="my-list">
      <li class="my-list-item" data-list="targetA">リスト項目A</li>
      <li class="my-list-item" data-list="targetB">リスト項目B</li>
      <li class="my-list-item" data-list="targetC">リスト項目C</li>
      <li class="my-list-item" data-list="targetD">リスト項目D</li>
      <li class="my-list-item" data-list="targetE">リスト項目E</li>
    </ul>
  </div>
</div>

↑冒頭で書いた通り、
「左側にボタン、右側にリスト」がある状態のhtmlになります。
html側でのポイントは、ボタン側・リスト側それぞれに「同じ値を持ったカスタムdata属性」を定義しておく点です。
※後述しますが、もちろん一致させられればclass名でも良いですし、id名とdata属性のペアでも大丈夫です。
これに、簡単にstyleを用意しておきます。

[css]

.my-wrapper {
  display: flex;
  justify-content: center;
  padding: 2rem;
  width: 1200px;
}
.my-item-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 2rem 0 0;
}
.my-button {
  align-items: center;
  background: #ebebeb;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  display: flex;
  font-size: .875rem;
  height: 48px;
  justify-content: center;
  margin: 0 0 1rem 0;
  width: 160px;
}
.my-list {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .3);
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.my-list-item {
  border-bottom: 1px solid #ebebeb;
  font-size: .875rem;
  min-width: 360px;
  padding: 1rem 2rem; 
  transition: background-color .3s, color .3s, font-weight .3s;
}
.my-list-item.is-selected {
  background: #beb9b9;
  color: #fff;
  font-weight: 700;
}

↑何度も言いますがサンプルなので、ものすごく簡素な見た目になります。
ここで定義したcssの中で、次のセクションで書く
JavaScript内で使用することになるのは
.my-list-item.is-selected
の部分で、この .is-selected が付与されると、リスト側の見た目が変化する仕組みです。

左側のボタンを押すと、対応する右側のリストが反応する仕組み

上記のコードで、ものすごくシンプルながら
「左側にボタン、右側にリスト」があるUIの準備ができました。

それではここに、
「左側のボタンを押す」と、
「それに対応する右側のリストが選択状態になる」
という仕組みを、素のJavaScriptで(≒jQuery非依存で)記述します。

[JavaScript]

<script>
  const myClickButtons = document.querySelector('.my-item-left');
  const myClickLists = document.querySelectorAll('.my-list-item');
  myClickButtons.addEventListener('click', (e)=> {
    // listのclassを初期化
    myClickLists.forEach((list)=>{
      list.classList.remove('is-selected');
    });
    const dataButton = e.target.getAttribute('data-button');
    if(dataButton !== null) {
      const myListItem = document.querySelector('.my-list-item[data-list="'+dataButton+'"]');
      myListItem.classList.add('is-selected');
    } else {
      return;
    };
  });
</script>

JavaScript部分について

上で書いた JavaScript の仕組みは至ってシンプルです。
まず、
2行目、3行目では対象となる要素を取得しています。
2行目が、ボタン要素を包括する親要素。
3行目が、ボタンを押したら変化をつけたいリスト達です。
4行目〜末尾までが、2行目で定義したボタンをクリックした際に実行される関数です。
4行目では、 addEventListener('click', アロー関数... の形で、
clickイベントが発生した場合を監視しています。
(e)=> {...(中略)
↑このように書いておくと、（ものすごくざっくり言うと）
e にはclickイベントが発生した箇所の内容が入ってくるので、
9行目にあるように、
const dataButton = e.target.getAttribute('data-button');
として、クリックされたボタンが持っているdata属性 ‘data-button’ の値が取得できるわけです。
10行目〜末尾は、リストにclassを付与して、押されたボタンの条件にあてはまるリストを更新している部分になります。
ポイントは、あらかじめ
ボタン側にもリスト側にも、一致する値を持たせたdata属性を定義しておく点です。(この例の場合、data-button と data-list)
※もちろんdata属性でなくとも、識別できるclass名などでも大丈夫です。
id名だと同一ページで同名idが重複してしまい、htmlのお作法的に非推奨となるので、つけるなら片方をidにしてもう一方を何らかの値(リンクを持っている場合はアンカーの値などでも可)で一致させる形がとれれば何をトリガーにしても大丈夫です。
そして
10行目〜末尾の内容ですが、
const myListItem = document.querySelector('.my-list-item[data-list="'+dataButton+'"]');
として、9行目で取得したボタンのdata属性に一致するリストを取得。
data属性の値が一致したリスト項目に対して、 is-selected というclassを付与しています。
この時、関連してくるのが 5〜8行目 に書いてある部分で、
5〜8行目であらかじめ、リスト(3行目で一括取得している)に対して、初期化をおこなっている点です。
具体的には、ボタンがクリックされるたび is-selected というclassを全てのリストから外しています。
これをしておくことで、クリックするたびに対応するリストのみ、見た目が更新されている様に見せているという事です。

とても基本的な形ですが、以上の html, css, JavaScript で
「左側のボタンを押す」と、
「それに対応する右側のリストが選択状態になる」
という仕組みを、素のJavaScriptで(≒jQuery非依存で)つくることができます。