使用javascript构建php循环，类只记录第一个结果

Question

I'm currently building a form and the data within it is build from a PHP Foreach loop

I'm using Javascript so that I can make the action of checking/unchecking a checkbox will make an ajax call.

The issue right now (using class names) is that when I click the checkbox and console log the data, each checkbox does trigger properly but it only console logs the first table row's data

So if my php loop builds 5 rows, each with their own values and their own checkboxes, each checkbox triggers the log but they each log only the first set of values.

What am I doing wrong here?

$(".addToLineup").click(function (e) {

  var number = document.getElementsByClassName("number")[0].innerHTML;
  var detail = document.getElementsByClassName("detail")[0].innerHTML;
  var category = document.getElementsByClassName("category")[0].innerHTML;

  updatedata.number = number;
  updatedata.detail = detail;
  updatedata.category = category;

  console.log(updatedata);

  )};

  <form id="saveLineup">
  @foreach($lists as $list)
      <tr style="text-align:center;">
        <td class="number">{{$list['GROUP']}}</td>
        <td class="detail">{{$list['COVER']}}</td>
        <td class="category">{{$list['CATEGORY']}}</td>
        <td><input class="addToLineup" type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?></td>
      </tr>        
  @endforeach
  </form>