PHP JS .sortable with multiple tables (main category and child elements)

This is what I would like to accomplish, but when I try to make the wrappers around my table (see all related code below), it doesn't work. Here's a jsfiddle that uses .sortable and works exactly as I would love to have it (https://jsfiddle.net/phpdeveloperrahul/3dbgov8b/).

---

CURRENT STATE AND WHAT I HAVE IN PLACE:

I have few joined tables (question, survey_question, question category, question_questioncategory) and a query to pull all questions and their respective categories. Once I pull everything, I am using a table and foreach loop to show categories and questions. Once I start adding classes 'sortable1' and 'sortable2' + 's1', 's2' from the jsfiddle above, it doesn't work.

QUERY:

SELECT q.question_id, q.question_name, qc.questioncategory_parent FROM question q LEFT JOIN survey_question sq ON sq.question_id = q.question_id AND sq.survey_id=". $survey_id ." LEFT JOIN question_questioncategory qqc ON (qqc.question_id = q.question_id) LEFT JOIN questioncategory qc ON (qc.questioncategory_id = qqc.questioncategory_id) + I have some ORDER BY here...

QUERY OUTPUT:

+----------------------------------------------------------------------+
| question_id | question_name    | questioncategory_parent             |
+----------------------------------------------------------------------+
| 100         | CAT A question 1 | Category A                          |
| 101         | CAT A question 2 | Category A                          |
| 102         | CAT B question 1 | Category B                          |
| 103         | CAT B question 2 | Category B                          |
+----------------------------------------------------------------------+

PHP: I am using a table and two foreach loops to find categories (questioncategory_parent) and questions (question_id and question_name).

echo "<table class='table table-sm table-hover table-vcenter'>";
    echo "<tbody class='sortable1'>";

        echo "<tr>"; // start unordered list of categories
            $currentCategory = "";
            $first = true;
                                        
            foreach($query_all_questions_row as $row_cat_qstn) {
            if($currentCategory != $row_cat_qstn['questioncategory_parent']) { // if new category
                if($first) {
                    echo "</tr>"; // end previous sub-category list
                } else {
                    $first = false;
                }                                           
                // category name header row                                         
                echo "<th class='bg-primary-dark text-white'>ID</th>";
                echo "<th class='bg-primary-dark text-white'>".$row_cat_qstn['questioncategory_parent']."</th>";
                                            
                echo "<tr>"; // start new sub-category list
                $currentCategory = $row_cat_qstn['questioncategory_parent']; // remember current category   
                }

                // child elements                                       
                echo "<tr>";
                    echo "<td>";
                        echo $row_cat_qstn['question_id'];
                    echo "</td>";
                    echo "<td>";
                        echo $row_cat_qstn['question_name'];
                    echo "</td>";
                echo "</tr>";   
            }   
                                    
            echo "</tr>"; // end last unordered list of sub-categories                                      
        echo "</tr>"; // end unordered list of categories
    echo "</tbody>";
echo "</table>";

And this outputs as expected - see the image: PHP output - category A and B, with respective questions listed underneath

JS: As per jsfiddle, I would like to make this one work, but not sure where to include 'sortable1', 'sortable2', and respective 'items: s1 and s2'.

$(".sortable1").sortable({
    items: ".s1"
});

$(".sortable2").sortable({
    items: ".s2"
});

I tried many variations with adding '.sortable' to a different section (within PHP), and none worked for me... E.g. the current version works with 'sortable1' and I am able to sort both questions and categories only as independent items. But, what I would like to do is to both move the entire category (and respective questions in it) AND move questions but without possibility to move them out from their category. Sorry if it seems complex and although I have a feeling it's something small required here, it might be that I need to reconsider and rewrite my entire 'PHP' section to accomplish this.

source https://stackoverflow.com/questions/67832384/php-js-sortable-with-multiple-tables-main-category-and-child-elements