如何在自己的div中使按钮单击获取数据属性？

Question

<?php 
//jQuery calls this code to save changes to inventory
if(isset($_POST['inventoryID'])){
//Filter all incoming fields
$attributeID = preg_replace('#[^0-9]#i', '', $_POST['attrID']);	
$inventoryID = preg_replace('#[^0-9]#i', '', $_POST['inventoryID']);
$inventorySKU = preg_replace('#[^a-z0-9\-]#i', '', $_POST['inventorySKU']);	
$inventorySize = preg_replace('#[^a-z0-9]#i', '', $_POST['inventorySize']);
$inventoryStock = preg_replace('#[^0-9]#i', '', $_POST['inventoryStock']);
$inventoryStatus = preg_replace('#[^a-z]#i', '', $_POST['inventoryStatus']);	

//change letter case
$inventorySKU = strtoupper($inventorySKU);	
$inventorySize = ucwords(strtolower($inventorySize));

	//Check missing fields
	if(!empty($inventorySKU) && !empty($inventorySize) && !empty($inventoryStock) && !empty($inventoryStatus)){ 	
		//Update row for product into table since there is no changes to image made
		$sql = "UPDATE Inventory SET SKU = '$inventorySKU', Size = '$inventorySize', Stock = '$inventoryStock', Status = '$inventoryStatus' WHERE PK_InventoryID = '$inventoryID' AND FK_AttributesID = '$attributeID'";
		$query = mysqli_query($connection, $sql);
		if($query){
			echo 'Your inventory has been successfully updated!';
		}else{
			echo 'FAILURE: Inventory not updated!';
		}
	}
	exit();	
}
?>

$(document).on('click', '#saveInvSubBtn', function() {
  // Obtain the inventory and attribute ID
  var iID = $('.deleteInvBtn').data("iid");
  var attrID = $('.deleteInvBtn').data("attrid");

  var form_data = new FormData();
  form_data.append('inventorySKU', $("#invSKU").val());
  form_data.append('inventorySize', $("#invSize").val());
  form_data.append('inventoryStock', $("#invStock").val());
  form_data.append('inventoryStatus', $("#invStatus").val());

  $.ajax({
    url: 'edit_inventory.php', // point to server-side PHP script 
    type: 'POST',
    data: form_data,
    dataType: 'text', // what to expect back from the PHP script
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) { // display success(i.e, echo response) response from the PHP script
      if (data === 'Your inventory has been successfully updated!') {
        //do something
      } else {
        //do something else
      }
    },
    error: function() { // display error response(i.e, server timeout etc) from the PHP script
      //display error msg
    }
  });
});

我有一个div（由文本字段和一个保存按钮组成），如下所示。这个div由PHP脚本回显，并且是动态的，即根据PHP WHILE循环通过echo函数将其自身复制多次。 div由表中的数据组成。如果有两行数据，则div将自身复制两次，等等。

我想要实现的是，当单击保存按钮时，jQuery应该获得按钮类“ deleteInvBtn”的数据属性以及所有文本字段的值，且其范围为OWN DIV。

这仅在单击第一个div保存按钮时有效。当单击第二个div保存按钮时，jQuery从第一个DIV获取数据属性和文本字段的值，这不是我所需要的。我了解Jquery click事件会获取与HTML匹配的第一个ID。我该如何解决？请注意，下面或实际脚本中显示的两个div都包含相同的类或ID。

我尝试了谷歌搜索和搜索，但无济于事。我尝试将数据属性附加到按钮本身，但仍然无法获取文本字段的值。

//This is Div 1
    <div class="flex-container-col">
        <form onSubmit="return false;">
        <div>
         <button class="deleteInvBtn" data-iid="5" data-attrid="67" 
         title="Delete Inventory"> 
         <img src="../images/bin.png" width="100%"></button>
    															 
         <label for="invSKU">SKU</label>
    	   <input type="text" class="form-text-no-border" id="invSKU" value="BSD-LALA40S">
        </div>
    														 
        <div>
    	    <label for="invSize">SIZE</label>
    	    <input type="text" class="form-text-no-border" id="invSize" value="Small">
        </div>
    														 
        <div class="flex-container-row">
    	    <div class="flex-col-50">
    	      <label for="invStock">STOCK</label>
    	      <input type="text" class="form-text-no-border"                      id="invStock" value="11">
          </div>
    															 
          <div class="flex-col-50">
    	      <label for="invStatus">STATUS</label>
    	      <select class="form-text-no-border" id="invStatus">
    	        //some option statement here
    	      </select>
    	    </div>
        </div>	
    														 
        <div class="flex-container-row">
    	    <input type="button" class="form-btn" id="saveInvSubBtn" 
             value="SAVE">
        </div>
        </form>	
    </div>


//This is Div 2. Same as above but with diffrent values
    <div class="flex-container-col">
        <form onSubmit="return false;">
        <div>
         <button class="deleteInvBtn" data-iid="8" data-attrid="84" 
         title="Delete Inventory"> 
         <img src="../images/bin.png" width="100%"></button>
    															 
         <label for="invSKU">SKU</label>
    	   <input type="text" class="form-text-no-border" id="invSKU" value="KCD-GERA40S">
        </div>
    														 
        <div>
    	    <label for="invSize">SIZE</label>
    	    <input type="text" class="form-text-no-border" id="invSize" value="Medium">
        </div>
    														 
        <div class="flex-container-row">
    	    <div class="flex-col-50">
    	      <label for="invStock">STOCK</label>
    	      <input type="text" class="form-text-no-border"                      id="invStock" value="31">
          </div>
    															 
          <div class="flex-col-50">
    	      <label for="invStatus">STATUS</label>
    	      <select class="form-text-no-border" id="invStatus">
    	        //some option statement here
    	      </select>
    	    </div>
        </div>	
    														 
        <div class="flex-container-row">
    	    <input type="button" class="form-btn" id="saveInvSubBtn" 
             value="SAVE">
        </div>
        </form>	
    </div>

单击div 1保存按钮时，应获取div 1“ deleteInvBtn”数据属性和div 1内的文本字段值。同样，当单击div 2保存按钮时，应获取div 2“ deleteInvBtn”数据属性和div 2中的文本字段值。

Answer 1

您可以按照以下方式进行操作：

//try to give the button a specific class instead of .form-btn for this purpose
$('.form-btn').click(function(){
  //from the clicked button find parent with type form then find id of the text field, then get the value.
  alert($(this).parents('form').find('#invSKU').val());
  
  //similarly for other elements.
  alert($(this).parents('form').find('.deleteInvBtn').data('attrid'));
  alert($(this).parents('form').find('.deleteInvBtn').data('iid'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//This is Div 1
    <div class="flex-container-col">
        <form onSubmit="return false;">
        <div>
         <button class="deleteInvBtn" data-iid="5" data-attrid="67" 
         title="Delete Inventory"> 
         <img src="../images/bin.png" width="100%"></button>
    															 
         <label for="invSKU">SKU</label>
    	   <input type="text" class="form-text-no-border" id="invSKU" value="BSD-LALA40S">
        </div>
    														 
        <div>
    	    <label for="invSize">SIZE</label>
    	    <input type="text" class="form-text-no-border" id="invSize" value="Small">
        </div>
    														 
        <div class="flex-container-row">
    	    <div class="flex-col-50">
    	      <label for="invStock">STOCK</label>
    	      <input type="text" class="form-text-no-border"                      id="invStock" value="11">
          </div>
    															 
          <div class="flex-col-50">
    	      <label for="invStatus">STATUS</label>
    	      <select class="form-text-no-border" id="invStatus">
    	        //some option statement here
    	      </select>
    	    </div>
        </div>	
    														 
        <div class="flex-container-row">
    	    <input type="button" class="form-btn" id="saveInvSubBtn" 
             value="SAVE">
        </div>
        </form>	
    </div>


//This is Div 2. Same as above but with diffrent values
    <div class="flex-container-col">
        <form onSubmit="return false;">
        <div>
         <button class="deleteInvBtn" data-iid="8" data-attrid="84" 
         title="Delete Inventory"> 
         <img src="../images/bin.png" width="100%"></button>
    															 
         <label for="invSKU">SKU</label>
    	   <input type="text" class="form-text-no-border" id="invSKU" value="KCD-GERA40S">
        </div>
    														 
        <div>
    	    <label for="invSize">SIZE</label>
    	    <input type="text" class="form-text-no-border" id="invSize" value="Medium">
        </div>
    														 
        <div class="flex-container-row">
    	    <div class="flex-col-50">
    	      <label for="invStock">STOCK</label>
    	      <input type="text" class="form-text-no-border"                      id="invStock" value="31">
          </div>
    															 
          <div class="flex-col-50">
    	      <label for="invStatus">STATUS</label>
    	      <select class="form-text-no-border" id="invStatus">
    	        //some option statement here
    	      </select>
    	    </div>
        </div>	
    														 
        <div class="flex-container-row">
    	    <input type="button" class="form-btn" id="saveInvSubBtn" 
             value="SAVE">
        </div>
        </form>	
    </div>