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

我正在建立一个新网站，希望在一个文本区域中显示多个数据列表下拉列表中的值，我尝试了以下代码： 我想要这样的输出，但我得到的是这样的输出

这是为了从多个数据列表中获取值并将所有值一次存储在文本区域中，我尝试创建三个数据列表，但当我从另一个数据列表中选择值时，先前数据列表中的值将被替换，我如何使所有值显示在所有数据列表的文本区域中

         <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>

我希望来自不同数据列表的所有值都显示在同一个文本框中，但现在，当我选择“下一个数据列表”时，我只得到一个值，而来自上一个数据列表的值将被替换。

在$EXCENSION.text$this.val；textarea的内容将替换为当前选定的下拉值。取而代之的是获取所有下拉字段，在其上循环并获取值，最后将其添加到textarea

const outputEle=$‘检查’； 让outputText=； $input[name=exam]。关于“更改”，函数{ $'input[name=exam]'。每一个，输入=>{ 让val=$input.val； 如果val{ outputText+=val+'\n'； } }; outputEle.valoutputText； 输出文本=； };

---

试着这样做：

<script>
    $("input[name=exam]").on('change', function () {
        const text = $("#examination").val().trim() !== '' ? $("#examination").val() + '\n' + $(this).val() :  $(this).val()
        $("#examination").text(text);
    });
</script>