WordPress: get parent and child categories separately by blocks

Question

I need to separate parent categories and child categories into separate blocks. Now I have so

<ul>
    <li class="cat-item">Parent_1
        <ul class="children">
            <li class="cat-item">Child_1_1</li>
            <li class="cat-item">Child_1_2</li>
        </ul>
    </li>
    <li class="cat-item">Parent_2
        <ul class="children">
            <li class="cat-item">Child_2_1</li>
            <li class="cat-item">Child_2_2</li>
        </ul>
    </li>
    <li class="cat-item">Parent_3
        <ul class="children">
            <li class="cat-item">Child_3_1</li>
            <li class="cat-item">Child_3_1</li>
        </ul>
    </li>
</ul>

I need to get something like this

<div class="parent">
    <ul>
        <li class="cat-item">Parent_1</li>
        <li class="cat-item">Parent_2</li>
        <li class="cat-item">Parent_3</li>
    </ul>
</div>

<div class="children">
    <ul>
        <li class="cat-item">Child_1_1</li>
        <li class="cat-item">Child_1_2</li>
    </ul>
    <ul>
        <li class="cat-item">Child_2_1</li>
        <li class="cat-item">Child_2_2</li>
    </ul>
    <ul>
        <li class="cat-item">Child_3_1</li>
        <li class="cat-item">Child_3_1</li>
    </ul>
</div>

I can get the parent categories separately, everything is fine with that. I can also get all the child categories, but the problem is that they go all together without separation in relation to the parent.

<?php
$args = array(
    'taxonomy'     => 'courses',
    'hierarchical' => true,
    'hide_empty'   => false,
    'title_li'     => '',
    'parent' => 0 // with this argument, I get only the parent
);
?>
<div class="submenu">
    <ul>
        <?php wp_list_categories($args); ?>
    </ul>
</div>

Answer 1

Try the below code. you can use get_terms() function to get all terms of courses. then you can iterate the loop and check against whether is parent or child.

$taxonomies = get_terms( array(
    'taxonomy' => 'courses',
    'hide_empty' => false
) );
 
if ( !empty($taxonomies) ) :
    $output = '<div class="parent"><ul>';
    foreach( $taxonomies as $category ) {
        if( $category->parent == 0 ) {
            $output .= '<li class="cat-item">'.$category->name.'</li>';
        }
    }
    $output.='</ul></div>';
    echo $output;
endif;

if ( !empty($taxonomies) ) :
    $output = '<div class="children">';
    foreach( $taxonomies as $category ) {
        if( $category->parent == 0 && get_term_children( $category->term_id, 'product_cat' ) ) {
            $output.= '<ul>';
            foreach( $taxonomies as $subcategory ) {
                if($subcategory->parent == $category->term_id ) {
                    $output .= '<li class="cat-item">'.$subcategory->name.'</li>';
                }
            }
            $output.='</ul>';
        }
    }
    $output.='</div>';
    echo $output;
endif;

Tested and works.