javascript - 同じID/名前/クラスの入力フィールドがajaxを投稿している間、mysql

Question

mysqlデータベースから製品を取得し、ユーザーが数量を入力してjavascript ajaxコードを使用して投稿できるようにするコードがあります

例: (実際の結果は mysql while{ }; からのものです。

<form>
<input id="vpb_quantity" type="number" min="1" max="99" step="1" value="1">
<input type="button" onclick="vpb_change_quantity('product1');" /></form>

<form>    <input id="vpb_quantity" type="number" min="1" max="99" step="1" value="1">
<input type="button" onclick="vpb_change_quantity('product2');" /></form>

<form>    <input id="vpb_quantity" type="number" min="1" max="99" step="1" value="1">
<input type="button" onclick="vpb_change_quantity('product3');" /></form>

<form>    <input id="vpb_quantity" type="number" min="1" max="99" step="1" value="1">
<input type="button" onclick="vpb_change_quantity('product4');" /></form>

これにより、数量を入力するための入力ボックスが表示され、ボタンを押して製品の新しい数量を送信し、ID を id="vpb_quantity1"、id="vpb_quantity2" などに変更しようとしましたが、java は vpb_quantity 値を取得しませんでした。コードを変更する必要があると思います：

var vpb_quantity = $("#vpb_quantity").val();

すべての結果に同じ 'id' を使用することはできません。次のコードを変更して、'id' の代わりに 'name' または 'class' を使用するにはどうすればよいですか?

スクリプト：

function vpb_change_quantity(item_id)
{
var vpb_quantity = $("#vpb_quantity").val();

$("div.checkout_user_info").hide();
$("div#checkout_user_info").hide();
$("div.shopping_cart_status").show();
$("div#shopping_cart_status").show();
var dataString = "item_id=" + item_id + "&vpb_quantity=" + vpb_quantity + "&page=change_quantity";
$.ajax({  
type: "POST",  
url: "vasplus_programming_blog_shopping_cart_v4.php",  
data: dataString,
beforeSend: function() 
{
$('html, body').animate({scrollTop:0}, 'slow');
$("#response").html('<img src="loading.gif" align="absmiddle" alt="Loading..."> Loading...<br clear="all" /><br clear="all" />');
},  
success: function(response)
{
$("#response").html(response);
}
});
}

id を name または class & に変更する必要があるため、その行を変更する必要があります: var vpb_quantity = $("#vpb_quantity").val(); どうすればそれができますか？