如何从不同的数据列表中选择值并将其一次显示在同一个文本区域框中？

Question

我正在建立一个新网站并希望从单个文本区域中的多个数据列表下拉列表中获取值，我尝试了以下代码：我想要这样的输出（https://ibb.co/1mJ2PVF）但我得到这样的输出（https://ibb.co/YN369Gt）。

这是用于从多个数据列表中获取值并将所有值一次存储在文本区域中，我尝试创建三个数据列表但是当我从另一个数据列表中选择值时，先前数据列表中的值被替换，我如何才能全部值出现在所有数据列表中的 textarea 中？

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

                 <datalist id="brown">

                     <option value="Morning">

                     <option value="Afternoon">

                     <option value="Evening">

                     <option value="Night">

                 </datalist>

         <input list="brown1" name="exam">

                 <datalist id="brown1">

                     <option value="twice">

                     <option value="once">

                     <option value="thrice">

                 </datalist>  

          <div class="col-md-4" style="margin-top:20px;">

                   <textarea id="examination" rows="5" cols="130"> 

                   </textarea>

          </div>

          <script>

                $("input[name=exam]").on('change', function () {

                    $("#examination").text($(this).val());

                });

          </script>

我希望来自不同数据列表的所有值都出现在同一个 textarrea 框中，但现在当我选择下一个数据列表时，我只得到一个，来自上一个数据列表的值被替换。