api - How to get input value from each input ordered by button using javascript?

Question

I want get userID value for each form separately using javascript api.

I tried :

     <form >
     <input  list="browsers" id="${childSnapshot.val().orderid}" >
     <datalist id="browsers">
       <option value="Order Pending">
       <option value="Order Confirmed">
       <option value="Order Shipped">
       <option value="Order Delivered">
     </datalist>
   </form>
   <input id="${childSnapshot.val().orderid}" value="${childSnapshot.val().userID}"
   <button id="${childSnapshot.val().orderid}"  onclick="reply_click(this.id)" style="padding:1px">Update</button>
       

function reply_click(clicked_id){
  let valueitem = document.getElementById(clicked_id).value;
  var orderid = clicked_id;
  console.log(orderid+valueitem)
}

The result i'm getting Order id and the option value, but userID its not coming how to fix it ?

Answer 1

Try the following demonstrative snippet:

const button = document.getElementById('button');

const onClickHandler = (e) => {
  const orderID = e.target.dataset.orderId;
  const userID = document.getElementById(orderID).value;
  console.log(userID + ' ' + orderID);
}

button.addEventListener('click', onClickHandler);

<form>
  <input id="list" list="browsers">
  
  <datalist id="browsers">
    <option value="Order Pending">
    <option value="Order Confirmed">
    <option value="Order Shipped">
    <option value="Order Delivered">
  </datalist>
  
  <input id="${childSnapshot.val().orderid}" value="${childSnapshot.val().userID}"></input>

  <button id="button" type="button" style="padding: 1px" data-order-id="${childSnapshot.val().orderid}">Update</button>
</form>