Bootstrap Accordion in wordpress functions.php

Question

I am making a shortcode in wordpress, including bootstrap accordion so that when I put the shortcode in the editor it gives me the posts title, image, categories, content etc. When I am putting bootstrap html in the post editor and make different shortcode for each posts entities, it’s working fine. But when I put the bootstrap html code inside the function.php and make one shortcode, everything is working only accordion collapse is not working. [i guess related to bootstrap javascript not working when html elements with classes are in the functions.php]

function hello_elementor_child_scripts_styles() {

    wp_enqueue_style(
        'hello-elementor-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        [
            'hello-elementor-theme-style',
        ],
        HELLO_ELEMENTOR_CHILD_VERSION
    );

    wp_enqueue_style( 'bootstrap-cdn-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css' );
    wp_enqueue_script( 'bootstrap-cdn-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js', array( 'jquery' ), '', true  );
}
add_action( 'wp_enqueue_scripts', 'hello_elementor_child_scripts_styles', 20 );

Here is my code [i already added bootstrap JS and CSS in functions.php]

function program_post_list_acc($atts){
    $post = get_the_post_thumbnail($atts['id'], 'medium');
    $image = apply_filters( 'thumbnail', $post);
    $fullcon .='<div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#acc'. $atts['id'].'"><span class="program-class-thumb"><div style="display:inline-block;" >'. $image .'</div><div class="program-class-lines" style="display:inline-block;">';

    $post_program = get_post($atts['id']);
        $tit = apply_filters( 'the_title', $post_program->post_title );
        $fullcon .='<div class="program-class-firstline">'. $tit . '</div>';
    $post_categories1 = get_the_terms( $atts['id'], 'teachers');
    $post_categories2 = get_the_terms( $atts['id'], 'classes_durations');
    $post_categories3 = get_the_terms( $atts['id'], 'classes_levels');
    $post_categories4 = get_the_terms( $atts['id'], 'classes_purpose');
    $post_categories5 = get_the_terms( $atts['id'], 'classes_style');
    $categories1 = wp_list_pluck( $post_categories1, 'name' );
    $categories2 = wp_list_pluck( $post_categories2, 'name' );
    $categories3 = wp_list_pluck( $post_categories3, 'name' );
    $categories4 = wp_list_pluck( $post_categories4, 'name' );
    $categories5 = wp_list_pluck( $post_categories5, 'name' );
    $categories = array_merge($categories2, $categories3, $categories4, $categories5);
    $fullcon .='<div class="program-class-secondline">';
    foreach ( $categories1 as $cat):
        $fullcon .='<span class="program-class-tag1">'. $cat . '</span>';
        endforeach;
    $fullcon .='</div>';    
    $fullcon .='<div class="program-class-thirdline">';
    foreach( $categories as $category):
        $fullcon .='<span class="program-class-tag2">'. $category . '</span>';
        endforeach;
    $fullcon .='</div></div></span></a></h4></div>';
        $output = Elementor\Plugin::instance()->frontend->get_builder_content($atts['id']);
    $fullcon .='<div id="acc'. $atts['id'].'" class="panel-collapse collapse"><div class="panel-body">'. $output .'</div></div></div></div>';    
    return $fullcon;
} 
add_shortcode('program_post_list_accordian', 'program_post_list_acc');

All values are returning fine. Only accordion is not expending/collapsing

Here I am sharing some screen shot: This screenshot- when i am adding html to post editor with using 4 shortcodes: more complicated

Adding html from post editor, I have to make 4 shortcodes, but accordion is working very well, with all post datas

but when I make only one shortcode and add all html to functions.php, this is the output, post data is there, even post content I can see from source code of web, but accordion now not working ie. not expending/collapsing

I hope these screenshots will be helpful to solve the problem.

Seems I found the solution

I just try something suggested in other questions and change my code by using ob_start(); and its working now.....

Here is my new code-------------

function program_post_list_acc($atts){
    ob_start();
    $post = get_the_post_thumbnail($atts['id'], 'medium');
    $image = apply_filters( 'thumbnail', $post);
    ?>
    <div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#acc<?php echo $atts['id'];?>">
    <span class="program-class-thumb"><div style="display:inline-block;" ><?php echo $image; ?></div>
    <div class="program-class-lines" style="display:inline-block;">
<?php
    $post_program = get_post($atts['id']);
        $tit = apply_filters( 'the_title', $post_program->post_title ); ?>
        <div class="program-class-firstline"><?php echo $tit; ?></div>
<?php        
    $post_categories1 = get_the_terms( $atts['id'], 'teachers');
    $post_categories2 = get_the_terms( $atts['id'], 'classes_durations');
    $post_categories3 = get_the_terms( $atts['id'], 'classes_levels');
    $post_categories4 = get_the_terms( $atts['id'], 'classes_purpose');
    $post_categories5 = get_the_terms( $atts['id'], 'classes_style');
    $categories1 = wp_list_pluck( $post_categories1, 'name' );
    $categories2 = wp_list_pluck( $post_categories2, 'name' );
    $categories3 = wp_list_pluck( $post_categories3, 'name' );
    $categories4 = wp_list_pluck( $post_categories4, 'name' );
    $categories5 = wp_list_pluck( $post_categories5, 'name' );
    $categories = array_merge($categories2, $categories3, $categories4, $categories5); ?>
    <div class="program-class-secondline"> 
<?php    
    foreach ( $categories1 as $cat): ?>
        <span class="program-class-tag1"><?php echo $cat; ?></span> 
<?php        
        endforeach; ?>
    </div>    
    <div class="program-class-thirdline">
<?php    
    foreach( $categories as $category): ?>
        <span class="program-class-tag2"><?php echo $category; ?></span>
<?php        
        endforeach; ?>
    </div></div></span></a></h4></div>
<?php    
    $output = Elementor\Plugin::instance()->frontend->get_builder_content($atts['id']); ?>
    <div id="acc<?php echo $atts['id']; ?>" class="panel-collapse collapse"><div class="panel-body"><?php echo $output; ?></div></div></div></div>
<?php    
    return ob_get_clean();
} 
add_shortcode('program_post_list_accordian', 'program_post_list_acc');

Thanks to the community