I have two lists and I want to trigger actions when I drop elements from list 2 on list 1.

I've not been able so far.

1 element from List 1

<li data-role="list-divider">
   <div class="row">
      <div class="col-md-6">
         <span>Holidays</span>
      </div>
      <div class="col-md-6">
         €2000
      </div>
   </div>
</li>

1 element from List 2

<li data-role="list-divider">
   <div class="row">
      <div class="col-xl-6 col-lg-6">
         <div class="card l-bg-blue-dark">
            <div class="card-statistic-3 p-4">
               <div class="card-icon card-icon-large"><i class="fas fa-laptop"></i></div>
               <div class="mb-4">
                  <h5 class="card-title mb-0">Laptop</h5>
               </div>
               <div class="row align-items-center mb-2 d-flex">
                  <div class="col-8" id="test">
                     <h2 class="d-flex align-items-center mb-0">
                        €1500
                     </h2>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</li>

JS:

    let favoriteList = document.getElementById('favoriteList');
    let otherList = document.getElementById('otherList');

    let favorite_list = Sortable.create(favoriteList, {
        animation: 150,
        group: 'shared',
        ghostClass: 'sortable-ghost',
    });

    let other_list = Sortable.create(otherList, {
        animation: 150,
        group: 'shared',
        ghostClass: 'sortable-ghost',
        sort: false
    });

    $( "#favoriteList" ).sortable({
        receive: function( event, ui ) {
            alert("Sorted!!");
        }
    });

I want to make element from list 2 equal to element in list 1. I understand I can achieve this by removing elements and changing classes (and therefore styles). However, I cannot trigger any action when dropping elements in list 1. It keeps triggering actions just when I move elements in list 1

any suggestions?