如果表单使用javascript提交，则发布错误的值

I have a table with different items and id's for each item. There are an dropdown menu for every item to delete/edit/start it. My problem is, that only the first item-id is passed to every of my $post['item_id'].

$(document).ready(function() {

$('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).data('value');
        $('#options').submit();
});


$("#options").submit(function() {
    if (confirm('proceed?')){
        return true;
    } else {
        return false;
    }
});
});

 <!-- BEGIN items -->
  <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
      <input type="hidden" name="item_id" value="{items.ID}">
      <input type="hidden" name="action" id="opt" value="">

      <li class="dropdown-opt"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
        <ul id="selector" class="dropdown-opt" role="menu">
          <li data-value="edit"><a href="#">Edit</a></li>
          <li data-value="start"><a href="#">Start</a></li>
          <li data-value="delete"><a href="#">Delete</a></li>
        </ul>
      </li>
      </form>
    </td>
  </tr>
  <!-- END items -->

My first ID is 116 at this time, if i click on "Edit" I got POST-ID 116 on every item. But why? I have

 <input type="hidden" name="item_id" value="{items.ID}">

on every item so it can't never be the same ID.

EDIT: After add id='item_id' to the input hidden and update the javascript it works now.

 <input type="hidden" name="item_id" id="item_id" value="{items.ID}">

 $('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).data('value');
        document.getElementById('item_id').value = $(this).closest('tr').find('input[name=item_id]').val();
        $('#options').submit();
}); 

The only thing that don't work was this line

 $(this).closest('tr').find('input#opt').val($(this).data('value'));

In this Javascript function

 $('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).closest('tr').find('input#opt').val($(this).data('value'));
        document.getElementById('item_id').value = $(this).closest('tr').find('input[name=item_id]').val();
        $('#options').submit();
});

But this don't bring any issue as far as i can see. Thank you very very much TechBreak!!!

You need to find closest tr first of the li element and then set the value in the respective input with id as opt and also get the required item id

    $('.dropdown-opt li').click(function() {
            $(this).closest('tr').find('input#opt').val($(this).data('value'));
            alert($(this).closest('tr').find('input[name=item_id]').val());
            $('#options').submit();
    });

Check this working demo

$(document).ready(function() {
  $('.dropdown-opt li').click(function() {
    $(this).closest('tr').find('input#opt').val($(this).data('value'));
    alert($(this).closest('tr').find('input[name=item_id]').val());
    
  });
  $("#options").submit(function() {
    if (confirm('proceed?')) {
      return true;
    } else {
      return
      false;
    }
  });
});

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


<table>

  <!-- BEGIN items -->
  <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
        <input type="hidden" name="item_id" value="115">
        <input type="text" name="action" id="opt" value="">

        <li class="dropdown-opt">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
          <ul id="selector" class="dropdown-opt" role="menu">
            <li data-value="edit"><a href="#">Edit</a>
            </li>
            <li data-value="start"><a href="#">Start</a>
            </li>
            <li data-value="delete"><a href="#">Delete</a>
            </li>
          </ul>
        </li>
      </form>
    </td>
  </tr>
    <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
        <input type="hidden" name="item_id" value="116">
        <input type="text" name="action" id="opt" value="">

        <li class="dropdown-opt">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
          <ul id="selector" class="dropdown-opt" role="menu">
            <li data-value="edit"><a href="#">Edit</a>
            </li>
            <li data-value="start"><a href="#">Start</a>
            </li>
            <li data-value="delete"><a href="#">Delete</a>
            </li>
          </ul>
        </li>
      </form>
    </td>
  </tr>
</table>
<!-- END items -->

</div>