Multiple select box with quantity field-CodePudding

I want to select items and their quantity. the item is already in database so it will see in checkbox and I want to add corresponding quantity I dont know how to implement. if another way is better than this please answer me .

eg: A multiple select box contain

Apple, Banana, Cherry

want to select quantity too

apple >>>> quantity 2

cherry >>>> quantity 3

answer with example

CodePudding user response：

Would this help?

const sel = document.getElementById("item");
const qtyDiv = document.getElementById("qtyDiv");
const qtys = qtyDiv.querySelectorAll("label");
const show = () => {
  const vals = [...sel.options].filter(option => option.selected).map(option => option.value);
  console.log(vals)
  qtys.forEach(qty => {
    qty.style.visibility = vals.includes(qty.id) ? "visible": "hidden";
  })  
};
sel.addEventListener("click",show)
show()

#parent {
  display: flex;
}

.narrow {
  width: 200px;
  height: 150px
  background: lightblue;
}

.wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

.wide label {
  display: block;
  visibility: hidden;
}

#item {   height: 50px; border: none; }

<div id="parent">
  <div >
    <select id="item" multiple size="2">
      <option value="apple">Apples</option>
      <option value="banana">Bananas</option>
    </select>
  </div>
  <div id="qtyDiv" >
    <label id="apple">How many apples?<input type"number" name="apples" /></label>
    <label id="banana">How many bananas?<input type"number" name="bananas" /></label>
  </div>
</div>