jQueryを使ってtable内のテキスト置換（入れ替え）

Question

前提・実現したいこと

画像のように、ボタンをクリックするとtable内のテキストが入れ替わる方法を教えていただけないでしょうか？

発生している問題・エラーメッセージ

該当のソースコード

html
<table>
 <tr>
   <td>Aさん</td>
   <td id="text"></td>
   <td id="text">M</td>
 </tr>
 <tr>
   <td>Bさん</td>
   <td id="text"></td>
   <td id="text">L</td>
 </tr>
 <tr>
   <td>Cさん</td>
   <td id="text"></td>
   <td id="text">LL</td>
 </tr>
</table>

<a  class="change" href="#" id="height" id="weight">btn</a>

試したこと

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
        $(function(){
        
        $('#height').on('click', function(){
            text = "172";
            swapText(text);
        });

        $('#weight').on('click', function(){
            text = "70";
            swapText(text);
        });

function swapText(text){
        document.getElementById('text').innerHTML = text;
        }            
    </script>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

m.ts10806さん指摘の文法上の間違いもそうですが、
そのようなデータをscript内の記述するのもいい方法ではないと思います。

HTMLの方に記述しておいて、必要に応じて表示/非表示を切り替えるのがシンプルだと思います。

<table border="1">
  <tr>
    <td>Aさん</td>
    <td class="blank"></td>
    <td class="size">M</td>
    <td class="height">172</td>
    <td class="weight">70</td>
  </tr>
  <tr>
    <td>Bさん</td>
    <td class="blank"></td>
    <td class="size">L</td>
    <td class="height">175</td>
    <td class="weight">75</td>
  </tr>
  <tr>
    <td>Cさん</td>
    <td class="blank"></td>
    <td class="size">LL</td>
    <td class="height">180</td>
    <td class="weight">80</td>
  </tr>
</table>

<a class="change" href="#" id="btn">btn</a>

.height, .weight {
  display: none;
}

$(function () {
  $('#btn').on('click', function () {
    $(".blank,.size").toggle();
    $(".height,.weight").toggle();
  });
})

Comments

[Hard_worker]

ありがとうございます。
解決できました。

Answer 2

idはページ内に唯一のものです。
複数に振っては正しく参照できません。
1つの要素に複数振ることもできません（そもそも同じ属性を複数振るのは文法違反とも言える）

1つの要素に1つ振り
例えばdata属性などを利用して操作先の要素を特定してください。

Comments

[Hard_worker]

ありがとうございます。
参考になりました。