Как добавить значение в поле ввода после удаления перетаскиваемого элемента?

Question

Я хочу добавить значение, которое перетаскивается в поле для добавления в скрытое значение ввода. как я могу это сделать? мой код приведен ниже для лучшего понимания. Я новичок в jquery разработке. поэтому я не знаю много вещей.

это мой код

$(function (){
  $("ul.fillInDropDiv").sortable({
    connectWith:"ul",
    dropOnEmpty:false,
    receive: function (event,ui){
      var $list = $(this);
      if ($list.children().length > 2) {
         $(ui.sender).sortable('cancel');
         return false;
       }
       var data = $list.children().context.innerText;

      console.log(data);

    },
    stop: function( event, ui ) {


      var item = $(this).find("input:hidden[name='answer[]']");
      console.log(item);
    }
  }).disableSelection();
});

.FillInDragDropDiv{
    min-height: 250px;
    padding: 15px;
}

.special{
line-height: 30px !important;
cursor: pointer;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
.fillInDropDiv{
    display: inline-table;
    background: transparent;
    border-bottom: 1px solid #052963;
    min-width: 100px;
    height: 25px;
    margin-bottom: 0;
    padding: 0px 10px;
    vertical-align: middle;
    color: #000;
}

.fillBlank{
    /*border: dashed 1px #FE4500;*/
    border: dashed 1px #0482E2;
    border-radius: 12px;
}
.FillInDragDropDiv{
    min-height: 250px;
    padding: 15px;
}

.fillInDropDiv ul{
    list-style: none;
}

#fillInSort{
   border-bottom: 0px solid #052963;
}


#fillInSort li{
    /*min-width: 100px;*/
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    background: #0482E2;
    /*background: #FE4500;*/
    color: #fff;
    margin: 5px;
}
.fillInDropDiv li {
    list-style: none;
    font-weight: 600;
    padding: 0;
    margin: 0;
    color: #000;
    cursor: pointer;
    text-align: center;
}
.queCard-sort{
    background: #EAF7FF;
    padding: 10px;
    border-radius: 5px;
    border: solid 1px rgba(112, 112, 112, 0.5);
    font-size: 16px;
    margin-bottom: 20px;
}
.fillBlankOnlyText{
    border: dashed 1px #0482E2;
    border-radius: 20px;
    text-indent: 5px;
    padding: 5px;
    margin-top: 5px;
    text-align: center;
    font-weight: bold;
}

.fillBlankOnlyText:focus {
    outline: none !important;
    border:1px dashed #0482E2;
    font-weight: bold;
}
#fillInSort{
   border-bottom: 0px solid #052963;
}


#fillInSort li{
    /*min-width: 100px;*/
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    background: #0482E2;
    /*background: #FE4500;*/
    color: #fff;
    margin: 5px;
}
.fillInDropDiv li {
    list-style: none;
    font-weight: 600;
    padding: 0;
    margin: 0;
    color: #000;
    cursor: pointer;
    text-align: center;
}

<ul class="fillInDropDiv fillBlank ui-sortable"><input type="hidden" name="answer[]" value=""></ul>

//I want to add list values to hidden input.
<ul class="fillInDropDiv ui-sortable list-inline" id="fillInSort" style="width:100% !important">
<li style="display:inline;" class="list ui-sortable-handle">1</li>
<li style="display:inline;" class="list ui-sortable-handle">3</li>
<li style="display:inline;" class="list ui-sortable-handle">2</li>
</ul>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>