我的ajax提交onchange select只处理第一行

<div id="container">
  <select class="my-select">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <!-- 可能还有更多的 select 元素 -->
</div>

document.getElementById('container').addEventListener('change', function(event) {
  if (event.target && event.target.classList.contains('my-select')) {
    // 处理 AJAX 提交
    handleAjaxSubmit(event.target.value);
  }
});

function handleAjaxSubmit(value) {
  // 使用 AJAX 提交数据
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/your-endpoint', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('Success:', xhr.responseText);
    }
  };
  xhr.send('value=' + encodeURIComponent(value));
}

<div id="container">
  <select class="my-select">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <!-- 可能还有更多的 select 元素 -->
</div>

$(document).ready(function() {
  $('#container').on('change', '.my-select', function() {
    var value = $(this).val();
    handleAjaxSubmit(value);
  });
});

function handleAjaxSubmit(value) {
  $.ajax({
    url: '/your-endpoint',
    type: 'POST',
    data: { value: value },
    success: function(response) {
      console.log('Success:', response);
    },
    error: function(xhr, status, error) {
      console.error('Error:', error);
    }
  });
}

document.getElementById('container').addEventListener('change', function(event) {
  console.log('Event triggered on:', event.target);
  if (event.target && event.target.classList.contains('my-select')) {
    handleAjaxSubmit(event.target.value);
  }
});