Dragula drop to different target of the same class

I need to make a functionality where I have few drag-able objects contained in #sourceItems, they should be dropped in one of the target container .my-container, which are of the same type (class, design, content).

Give the following

<div id='sourceItems'>
    <div class='make-it-nice-with-border'>Item One</div>
    <div class='make-it-nice-with-border'>Item Two</div>
    <div class='make-it-nice-with-border'>Item Three</div>
</div>

<div id='destination'>
   <div class='my-container'>
        <span>Some description 1</span>
   </div>
   <div class='my-container'>
        <span>Some description 2</span>
   </div>
   <div class='my-container'>
        <span>Some description 3</span>
   </div>
   <div class='my-container'>
        <span>Some description 4</span>
   </div>
</div>

and the JavaScript initialization

dragula([document.querySelector('#sourceItems'), 
         document.querySelector('#destination')], 
        {
                revertOnSpill: true 
        });

I was able to make the objects to be dropped in the #destination container, but they are appended as siblings of the elements 'my-container'. What I want is the object should be appended inside the element 'my-container'.

I tried changing it to, but it did not work at all.

  dragula([document.querySelector('#sourceItems'), 
             document.querySelector('.my-container')], 
            {
                    revertOnSpill: true 
            });

Anyone knows what I am missing?

Thanks,

The issue is document.querySelector only returns a single element. You'll want to use querySelectorAll and convert that to an Array, then concat with #sourceItems query.

dragula(
    [ document.querySelector( '#sourceItems' ) ].concat(
        Array.from( document.querySelectorAll('.my-container') )
    ), {
        revertOnSpill: true 
    });

Fiddle