Javascript 调试jQuery代码以获取所有行的总和(票证类型)

我正在开发一个票证小部件.门票类型很少，每种门票类型还有3个门票选项.当用户开始输入一种票证类型的数量时，应禁用其他票证类型的票证选项.如果用户擦除这些值或将值重新设置为零，则应再次启用其他票证类型的票证选项.

汇总部分应根据输入内容显示总数量和总成本.

这是我的助手:https://codepen.io/CodingPupil/pen/zYbqPxw人

启用/禁用票证选项工作正常.但它只计算第一行票据类型的总数.如果我输入第二或第三或任何其他门票类型的值，它不会计算总数.你能调试一下我的jQuery代码，让它显示所有门票类型的正确总数吗？

看看我的副手，我到目前为止都试过什么: https://codepen.io/CodingPupil/pen/zYbqPxw个

Html:

<div class="ticket-section">
    <div class="ticket-type" data-ticket-type="grandstand">
      <h3>Grandstand</h3>
      <div class="ticket-options">
        <div class="ticket-option">
            <label>Adult:</label>
            <input type="number" class="ticket-qty" data-type="grandstand" data-option="adult" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Child/OAP:</label>
            <input type="number" class="ticket-qty" data-type="grandstand" data-option="child_oap" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Young Child:</label>
            <input type="number" class="ticket-qty" data-type="grandstand" data-option="young_child" min="0" value="0">
        </div>
      </div>
    </div>
    
    <div class="ticket-type" data-ticket-type="grandstand-side">
      <h3>Grandstand Side</h3>
      <div class="ticket-options">
        <div class="ticket-option">
            <label>Adult:</label>
            <input type="number" class="ticket-qty" data-type="grandstand-side" data-option="adult" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Child/OAP:</label>
            <input type="number" class="ticket-qty" data-type="grandstand-side" data-option="child_oap" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Young Child:</label>
            <input type="number" class="ticket-qty" data-type="grandstand-side" data-option="young_child" min="0" value="0">
        </div>
      </div>
    </div>
    
    <div class="ticket-type" data-ticket-type="ringside-row-1">
        <h3>Ringside Row 1</h3>
        <div class="ticket-options">
        <div class="ticket-option">
            <label>Adult:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-1" data-option="adult" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Child/OAP:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-1" data-option="child_oap" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Young Child:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-1" data-option="young_child" min="0" value="0">
        </div>
        </div>
    </div>
    
    <div class="ticket-type" data-ticket-type="ringside-row-2">
        <h3>Ringside Row 2</h3>
        <div class="ticket-options">
        <div class="ticket-option">
            <label>Adult:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-2" data-option="adult" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Child/OAP:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-2" data-option="child_oap" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Young Child:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-2" data-option="young_child" min="0" value="0">
        </div>
        </div>
    </div>
    
    <div class="ticket-type" data-ticket-type="ringside-row-3">
        <h3>Ringside Row 3</h3>
        <div class="ticket-options">
        <div class="ticket-option">
            <label>Adult:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-3" data-option="adult" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Child/OAP:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-3" data-option="child_oap" min="0" value="0">
        </div>
        <div class="ticket-option">
            <label>Young Child:</label>
            <input type="number" class="ticket-qty" data-type="ringside-row-3" data-option="young_child" min="0" value="0">
        </div>
        </div>
    </div>
    
    <!-- Add additional ticket types and options as needed -->
</div>
  
<div class="ticket-summary">
    <h3>Total Summary</h3>
    <div class="total-info">
      <p>Total Tickets: <span id="total-tickets">0</span></p>
      <p>Total Cost: £<span id="total-cost">0.00</span></p>
    </div>
</div>

JS:

jQuery(document).ready(function($) {
        const ticketPrices = {
          grandstand: {
            adult: 20,
            child_oap: 15,
            young_child: 10
          },
          grandstand_side: {
            adult: 25,
            child_oap: 18,
            young_child: 12
          },
          ringside_row_1: {
            adult: 30,
            child_oap: 22,
            young_child: 15
          },
          ringside_row_2: {
            adult: 35,
            child_oap: 25,
            young_child: 18
          },
          ringside_row_3: {
            adult: 40,
            child_oap: 30,
            young_child: 20
          }
        };
    
        $('.ticket-qty').on('input', function() {
          var currentType = $(this).data('type');
          var activeQuantity = parseInt($(this).val()) || 0;
    
          // Disable all inputs initially
          $('.ticket-qty').prop('disabled', true);
    
          // Enable inputs for the current ticket type
          $('.ticket-qty[data-type="' + currentType + '"]').prop('disabled', false);
    
          var totalTickets = 0;
          var totalCost = 0;
    
          $('.ticket-qty').each(function() {
            var ticketType = $(this).data('type');
            var ticketOption = $(this).data('option');
            var quantity = parseInt($(this).val()) || 0;
    
            if (quantity > 0) {
              $(this).closest('.ticket-type').addClass('active');
            } else {
              $(this).closest('.ticket-type').removeClass('active');
            }
    
            if (ticketPrices[ticketType] && ticketPrices[ticketType][ticketOption]) {
              var ticketCost = ticketPrices[ticketType][ticketOption];
              totalTickets += quantity;
              totalCost += quantity * ticketCost;
            }
    
            if ($(this).val().trim() === '') {
              $(this).val('0');
            }
          });
    
          // Check if all inputs of the active row are 0 to enable other rows
          if (activeQuantity === 0) {
            $('.ticket-qty').not('.ticket-qty[data-type="' + currentType + '"]').prop('disabled', false);
          }
    
          $('#total-tickets').text(totalTickets);
          $('#total-cost').text(totalCost.toFixed(2));
        });
      });