Jquery 从“选择”下拉列表中选择选项后，单击按钮将其附加到div

我有一个选择下拉列表和一个按钮。从选择下拉列表中选择项目并单击按钮后，我需要将所选项目附加到一个div，该div显示您添加的内容

您应该能够继续选择项目并将其添加到div。此外，您添加的选项旁边应该有一个X，您可以使用该X将其从选择列表中删除

我需要弄清楚如何为此编写JQuery。请帮忙！谢谢

以下是我需要的图像：

这是我的密码：

<div class="col-12 col-md-7">
    <span>Select the fixture type:*</span>
          <select id="fixture-type">
                 <option>Select</option>
                 <option>Select</option>
                 <option>Select</option>
          </select>
    <button class="btn-primary">+ ADD FEATURE</button>
</div>
<div class="col-12 col-md-5">
     <div class="append-list">
     <!--Append selection box items here-->
     </div>
</div>

我有你的工作解决方案

---

如果有帮助，请告诉我。

我们一直很乐意帮助和支持新的编码人员，但您需要先帮助自己。如果您有问题，请发布您尝试过的内容，并清楚解释哪些内容不起作用，然后提供。读这本书。另外，请务必阅读@Rorymcrossan，我已经做了研究。我不太精通JQuery。上面列出了我的JQuery代码。

$(document).ready(function() {
    $("#fixture-type").on('change', function (e){
        $(".append-list").text($(this).val());
    });
});

<div class="col-12 col-md-7">
    <span>Select the fixture type:*</span>
          <select id="fixture-type">
                 <option>Select1</option>
                 <option>Select2</option>
                 <option>Select3</option>
          </select>
    <button class="btn-primary" id="mybtn">+ ADD FEATURE</button>
</div>
<div class="col-12 col-md-5">
     <div class="append-list ul">
     <!--Append selection box items here-->
     </div>
</div>

$('#mybtn').click(function(){
    $(".append-list").append('<li>'+ $('#fixture-type').val() +'</li>');

});