Draggable 2 in one block, need help?

Question

JavaScript

Greetings, I need the help of a jqerry expert.
I use jqerry ui, I need to move blocks for sorting, here is the link - https://jqueryui.com/draggable/#sortable
structure is something like this:

<div class="block">
               <div id="sortable">

                   //блок с вопросом, такие блоки добавляются друг за другом
                   <div class="draggable">
                       <div class="header-block">
                           <a class="move">переместить вопрос</a>
                       </div>
                       <div class="body-block">
                           <div>тут много блоков и разных текстов ссылок ul li и тп</div>
                           <div class="sortable2">

                                //блок с ответами, такие блоки добавляются друг за другом
                                <div class="draggable2">
                                    <p>тут форма</p>
                                    <a class="move2">переместить ответ</a>
                                </div>
                                //

                           </div>
                           <button class="addQuestion2">Добавить ответ</button>
                       </div>
                   </div>
                   //

               </div>
               <button class="addQuestion">Добавить вопрос</button>
           </div>

here is the js part:

$(function() {
                    $( "#sortable" ).sortable({
                        revert: true
                    });
                    $( ".draggable" ).draggable({
                        connectToSortable: "#sortable",
                        revert: "invalid",
                        handle: ".move",
                        cancel: ".body-block",
                        axis: "y"
                    });
                    $( ".sortable2" ).sortable({
                        revert: true
                    });
                    $( ".draggable2" ).draggable({
                        connectToSortable: ".sortable2",
                        revert: "invalid",
                        handle: ".move2",
                        axis: "y"
                    });
                    $( "ul, li, div" ).disableSelection();
                });

on the add question button, a new block is added in the code marked which one, inside this block there is a block with the same addition.
blocks need to be moved for sorting, both questions and answers
on the screen are shown in red for clarity, which blocks are moved prntscr.com/ia1p9x
and so, the problem with this dragabl)
the questions themselves move normally, but they also move if you capture anywhere in the block, which no need (tried to forbid ( cancel: ".body-block", ) but for some reason the cancel does not work, but this is not the main thing.
When adding a new question, the blocks in the answers are not dragged at all, the new questions themselves are dragged normally, but in new questions answers are not captured (I think that due to the fact that the class is sortable and not ID like questions.
If it is not clear, write, I will try to explain it more clearly.
Pts. need help (

Answer 1

The type entry $('.someclass').draggable()means:
But for those elements that will appear in the future, this does not apply.
Use MutationObserver to watch for new elements and draggable them.