使用javascript获取多个id'；s

我有一个表，列出了所有用户的发票，每个发票都包含一个付款按钮，允许他们支付账单

我目前有一个循环，它遍历每个发票并在其自己的行中显示每个发票，当用户点击支付按钮时，JavaScript将显示一个选择框以使用保存的卡或新卡，如果用户选择保存的卡，则JavaScript将显示另一个包含其保存的卡的选择框，如果选择了新卡，则会显示其他输入字段，此时，选择保存的卡或新卡时的显示和隐藏部分仅适用于表中的第一行，其他行不适用于该JavaScript，我确信这是因为JavaScript正在获取第一个id并停在那里。当用户在每张发票上选择一张已保存的卡或新卡时，我如何正确地执行此操作，以获取所有ID并运行代码

我创建了一个JSFIDLE来显示我的确切情况，有人可以将它修改到可以工作的地方吗？我会非常感激的！

payments.blade.php

@if($payments)
  @foreach($payments as $payment)
      <tr>
          <td><a href="">${{number_format(($payment->price /100), 2, '.', ' ')}}</a></td>
          <td>{{$payment->product_name}}</td>
          <td>{{$payment->created_at->toFormattedDateString()}}</td>
          <td>{{$payment->created_at->addMonth()->toFormattedDateString()}}</td>
          <td>{{$payment->reoccurring}}</td>
          <td>{{$payment->status}}</td>
            @if($payment->status == "Paid")
            @else
              <td>
                  <div class="add-payment-container">
                      <button class="toggle-add-payment mdl-button mdl-js-button mdl-js-ripple-effect pull-right btn-info">
                          @if($payment->reoccurring == "Yes")
                              Subscribe
                          @else
                              Pay Here
                          @endif
                      </button>
                      <div class="add-payment">
                          </br>
                          <form action="{{'/users/payment'}}" method="post"
                                id="checkout-form">
                              <input type="text" name="price" class="hidden"
                                     value="{{$payment->price}}">
                              <input type="text" name="productName" class="hidden"
                                     value="{{$payment->product_name}}">
                              <input type="text" name="paymentID" class="hidden"
                                     value="{{$payment->id}}">
                              <input type="text" name="reoccurring" class="hidden"
                                     value="{{$payment->reoccurring}}">
                              <div class="row">
                                  <div class="col-sm-4">
                                      <div id="paymentMethodDiv"
                                           class="form-group label-floating">
                                          {!! Form::label('paymentMethod', 'Payment Method') !!}
                                          </br>
                                          {!! Form::select('paymentMethod', ['Saved Card'=>'Saved Card','New Card'=>'New Card'], null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'paymentMethod'])!!}
                                      </div>
                                  </div>
                                  <div class="col-sm-4">
                                      <div id="savedCardsDiv" class="form-group label-floating" style="display: none;">
                                          {!! Form::label('card', 'Previous Cards') !!}
                                          </br>
                                          {!! Form::select('card', $cardLast4, null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'savedCards'])!!}
                                      </div>
                                  </div>
                                  <div class="col-md-4">
                                      <div id="cardHolderNameDiv" class="form-group label-floating" style="display: none;">
                                          <label class="control-label">Card Holder
                                              Name</label>
                                          <input type="text" id="card-name"
                                                 class="form-control">
                                      </div>
                                  </div>
                                  <div class="col-md-4">
                                      <div id="cardNumberDiv" class="form-group label-floating" style="display: none;">
                                          <label class="control-label">Card Number</label>
                                          <input type="text" id="card-number"
                                                 class="form-control">
                                      </div>
                                  </div>
                              </div>
                              <div class="row">
                                  <div class="col-md-5">
                                      <div id="expirationMonthDiv" class="form-group label-floating" style="display: none;">
                                          <label class="control-label">Expiration
                                              Month</label>
                                          <input type="text" id="card-expiry-month"
                                                 class="form-control">
                                      </div>
                                  </div>
                                  <div class="col-md-5">
                                      <div id="expirationYearDiv" class="form-group label-floating" style="display: none;">
                                          <label class="control-label">Expiration Year</label>
                                          <input type="text" id="card-expiry-year"
                                                 class="form-control">
                                      </div>
                                  </div>
                                  <div class="col-md-2">
                                      <div id="cvcDiv" class="form-group label-floating" style="display: none;">
                                          <label class="control-label">CVC</label>
                                          <input type="text" id="card-cvc"
                                                 class="form-control">
                                      </div>
                                  </div>
                              </div>
                              {{csrf_field()}}
                              <button type="submit" class="btn btn-primary pull-right">Make
                                  Payment
                              </button>
                              <div class="clearfix"></div>
                          </form>
                      </div>
                  </div>
              </td>
          @endif
      </tr>


<script>
    var paymentMethodSelect = document.getElementById('paymentMethod');
    paymentMethodSelect.onchange = function () {
        if (paymentMethodSelect.value == 'Saved Card') {
            document.getElementById("savedCardsDiv").style.display = "block";
            document.getElementById("cardHolderNameDiv").style.display = "none";
            document.getElementById("cardNumberDiv").style.display = "none";
            document.getElementById("expirationMonthDiv").style.display = "none";
            document.getElementById("expirationYearDiv").style.display = "none";
            document.getElementById("cvcDiv").style.display = "none";
        } else if (paymentMethodSelect.value == 'New Card') {
            document.getElementById("savedCardsDiv").style.display = "none";
            document.getElementById("cardHolderNameDiv").style.display = "block";
            document.getElementById("cardNumberDiv").style.display = "block";
            document.getElementById("expirationMonthDiv").style.display = "block";
            document.getElementById("expirationYearDiv").style.display = "block";
            document.getElementById("cvcDiv").style.display = "block";
        } else {
            document.getElementById("savedCardsDiv").style.display = "none";
            document.getElementById("cardHolderNameDiv").style.display = "none";
            document.getElementById("cardNumberDiv").style.display = "none";
            document.getElementById("expirationMonthDiv").style.display = "none";
            document.getElementById("expirationYearDiv").style.display = "none";
            document.getElementById("cvcDiv").style.display = "none";
        }
    };
</script>

@if（$payments）
@foreach（$payment作为$payment支付）
{{$payment->product_name}
{{$payment->created_at->toFormattedDateString（）}
{{$payment->created_at->addMonth（）->toFormattedDateString（）}
{{$payment->重复发生}
{{$payment->status}
@如果（$payment->status==“payment”）
@否则
@如果（$payment->reoccurreng==“Yes”）
订阅
@否则
在这里付款
@恩迪夫


{！！表单：：标签（'paymentMethod'，'paymentMethod'）


{！！表单：：选择（'paymentMethod'，['Saved Card'=>'Saved Card'，'New Card'=>'New Card']，null，['class'=>'浏览器默认mdl selectfield'，'占位符'=>'选择选项'，'id'=>'paymentMethod']）
{！！表单：：标签（'card'，'previouscards'）


{！！Form:：select（'card'，$cardLast4，null，['class'=>'浏览器默认mdl selectfield'，'placeholder'=>'选择选项'，'id'=>'保存卡片']）
持卡人
名称
卡号
到期
月
到期年
CVC
{{csrf_field（）}}
制作
付款
@恩迪夫
var paymentMethodSelect=document.getElementById（'paymentMethod'）；
paymentMethodSelect.onchange=函数（）{
如果（paymentMethodSelect.value==“已保存的卡”）{
document.getElementById（“savedCardsDiv”）.style.display=“block”；
document.getElementById（“持卡人名称div”）.style.display=“无”；
document.getElementById（“cardNumberDiv”）.style.display=“无”；
document.getElementById（“expirationMonthDiv”）.style.display=“无”；
document.getElementById（“expirationYearDiv”）.style.display=“无”；
document.getElementById（“cvcDiv”）.style.display=“无”；
}else if（paymentMethodSelect.value==“新卡”）{
document.getElementById（“savedCardsDiv”）.style.display=“无”；
document.getElementById（“持卡人名称div”）.style.display=“block”；
document.getElementById（“cardNumberDiv”）.style.display=“block”；
document.getElementById（“expirationMonthDiv”）.style.display=“block”；
document.getElementById（“expirationYearDiv”）.style.display=“block”；
document.getElementById（“cvcDiv”）.style.display=“block”；
}否则{
document.getElemen
 $(document).ready(function() {
    $("select[name='paymentMethod']").change(function() {
          var dropdownValue = $(this).val();
          var transactionId = $(this).parent().attr('transactionId');
          switch (dropdownValue) {
            case 'Saved Card':
                $("td[transactionId='" + transactionId + "'] div.savedCardsDiv").show();
              break;
            case 'New Card':
                $("td[transactionId='" + transactionId + "'] div.savedCardsDiv").hide();
              break;
            default:
                $("td[transactionId='" + transactionId + "'] div.savedCardsDiv").hide();
              break;
          };

        });
});

<table>
<tr>
  <td transactionId="1">
    <select name="paymentMethod" form="carform" class="paymentMethod">
      <option value="">Select your option</option>
      <option value="Saved Card">Saved Card</option>
      <option value="New Card">New Card</option>
    </select>
    <div class="savedCardsDiv" style="display: none;">
      <select name="savedCards" form="carform" class="savedCards">
        <option value="">Select your option</option>
        <option value="Saved Card">****4242</option>
        <option value="New Card">****5423</option>
      </select>
    </div>
  </td>
</tr>
<tr>
  <td transactionId="2">
    <select name="paymentMethod" form="carform" class="paymentMethod">
      <option value="">Select your option</option>
      <option value="Saved Card">Saved Card</option>
      <option value="New Card">New Card</option>
    </select>
    <div class="savedCardsDiv" style="display: none;">
      <select name="savedCards" form="carform" class="savedCards">
        <option value="">Select your option</option>
        <option value="Saved Card">****4242</option>
        <option value="New Card">****5423</option>
      </select>
    </div>
  </td>
</tr>
</table>