如何多次从数据列表下拉列表中选择值，然后每次将值存储在表的新行中？

Question

I am setting up a new web page where I want to select value from datalist dropdown and store it in a table row but when I select value from the same datalist second time the previous value gets replaced instead of that I want value selected second time from datalist to store in the second row of a table? How can I achieve that?

I have tried to add value selected in a datalist in a table row which is adding in a table row but when I select a value from same datalist second time the previous value gets replaced but I want the second value to be stored in the second row of a table, how can I achieve this?

<input list="browa" name="adv">

   <datalist id="browa">

          <option value="Twice a Day">
          <option value="Thrice a Day">
          <option value="After meal">
          <option value="Before meal">
          <option value="Once a Day">

   </datalist>  

  <input list="brown" name="dose">

      <datalist id="brown">

           <option value="Morning">
           <option value="Afternoon">
           <option value="Evening">
           <option value="Night">

      </datalist> 

</div>

 <table style="width:100%; margin-top:10px;">
    <tr>

       <th>Advice</th>

       <th>Dose</th>                                          
   </tr>

   <tr>

      <td id="adv"></td>
      <td id="dose"></td>

   </tr>

  </table>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>

            $("input[name=adv]").on('change', function () {
                $("#adv").text($(this).val());
            });

            $("input[name=dose]").on('change', function () {
                $("#dose").text($(this).val());
            });
  </script>

As of now, I am getting a result like this ( https://ibb.co/2nfTV1N ) but I want results like this ( https://ibb.co/YLhCrgk ). please tell me how can I do this?

Answer 1

Yes the value is being replaced because you are just setting the .text property. You should use .append or .add, or some method that doesn't overwrite.

If you want it to append an actual new grid row, then create a new element that is the grid row populated with the correct values. Then, append the new element

Answer 2

$("input[name=adv]").on('change', function() { $("#adv").append($("<tr><td></td></tr>") .text($(this).val())); });