Wordpress Shortcode Post in Modal Popup show always first Post

Question

I have created a shortcode to display a single post in a modal popup. The text for the link and the ID of the post are transferred.

[postpopup text=„linktext“ id=„post-id“]

The problem with my code is, the shortcode show always the first postcontent if i insert more than one shortcode a poge or post.

The shortcode-function contains the link with the corresponding Javascript onclick function and integration of the post content in the corresponding DIVs.

<?php
/**********************************************
*
* Post Popup Shortcode
* include in functions.php
* [ postpopup text="linklabel" id="post-id"]
*
**********************************************/

function post_in_popup_shortcode( $atts ) {
    
    STATIC $sc_call_num = 0;
    
    $setmodal = '';
    $linkidprefix = strval(rand(1,20));
      
    $a = shortcode_atts(
        array (
            'id'   => false,
            'text' => 'text'
        ), $atts );

    $id   = $a [ 'id' ];
        $linkLabel = $a [ 'text' ];
    
    $modalpost = get_post( $id );
    
    if ( ! is_numeric( $id ) ) {
            return 'Invalid value';
    }
    
    if ( ! $modalpost) {
        return 'Post not found';
    }
    
    $sc_loads = array();
    $sc_loads[$sc_call_num] = $id;
    
    foreach ($sc_loads as $x) {
    

 print_r('IDs: ' . $x . ' ');
    
    $setmodal = '<div class="modal-link-holder"><a id="linkmodal-' . $x . $linkidprefix .'" class="modal-link" href="#" onClick="setModalPopup()">' .$linkLabel . ' ' . $x .  '</a></div>';
    
    $setmodal .= '<div id="modal-popup">' . '<div class="mymodal-content">' . get_post( $x )->post_content . '</div>' . '</div>';
    
    $sc_call_num++;
  
    return $setmodal;
    
    }
}
add_shortcode('postpopup', 'post_in_popup_shortcode');
?>

This also works: the link is displayed and the popup with the content is loaded with a click. THE PROBLEM with my code is: if I insert more than one shortcode with different attributes on a page - for example:

[postpopup text="link-1" id="17277"]
[postpopup text="link-2" id="17272"]
[postpopup text="link-3" id="17311"]

the content of the first post (the top one in the Gutenberg editor) is always displayed for all shortcodes. In the example above, it would be the post content with the post with the ID 17277. I have already inserted a foreach loop to check the transferred IDs and with print_r this is also displayed correctly.

What am I doing wrong? Or is it a problem with the caching? And how can I limit the static variable to one page or post at a time? And how can I Thanks for your help and sorry for my pretty english.

UPDATE CODE I have rebuilt the code again and work with the functions ob_start() and ob_get_clean(). And again the correct array values are output with print_r(). Nevertheless, the same result again: While the link to call the popup is displayed correctly, only the post with the ID [postpopup text="link-1" id="17277"] assigned in the first (topmost) shortcode in the Gutenberg editor appears again. Here is the new code:

<?php
/**********************************************
*
* Post Popup Shortcode
* include in functions.php
* [ postpopup text="linklabel" id="post-id"]
*
**********************************************/

function shortcodes_init(){
 add_shortcode( 'postpopup', 'post_in_popup_shortcode' );
}
add_action('init', 'shortcodes_init');


function post_in_popup_shortcode ( $atts ) {
    
    ob_start();
    
    $HTML = '';
    
    $linkidprefix = strval(rand(1,1000));
    $id = strval(rand(1,20));
      
    $a = shortcode_atts(
        array (
            'id'   => '123',
            'text' => 'text'
        ), $atts, 'postpopup' );
    
          
        echo 'Array $a: ' . print_r($a) . '<br><br>';
        
        $linkLabel = $a [ 'text' ];
        $modalpost_id = $a [ 'id' ];
   
 
      $content = get_post_field('post_content', $modalpost_id );
    
     $HTML = '<div class="modal-link-holder"><a id="linkmodal-' . $linkidprefix .'" class="modal-link" href="#" onClick="setModalPopup()">' . $linkLabel . ' ' . $a [ 'id' ] .  '</a></div>';

     $HTML .= '<div id="modal-popup-' . $linkidprefix . '"class="modal-popup">' . '<div id="mymodal-content-'. $linkidprefix . '"class="modal-content">' . $content . '</div>' . '</div>';
     
     echo $HTML;
    
    return ob_get_clean();

}
add_shortcode('postpopup', 'post_in_popup_shortcode');
?>

If I change the order of the shortcodes in the editor, the display of the post that is displayed for everyone else changes accordingly.

For a better understanding below the Javascript to call the modal popup. Maybe that's where the problem lies. Although the popup works as expected and displays the entire post content in a structured way.

<script type="text/JavaScript"> 
        
     function setModalPopup() {
        // Get the modal
         
         document.querySelector(".modal-popup").style.display = "block";
        

        // Get the button that opens the modal
        var openLink = document.getElementsByClassName("modal-link");
    
        // When the user clicks on the button, open the modal
        openLink.onclick = function() {
          document.querySelector(".modal-popup").style.display = "block";

        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
          if (event.target == document.querySelector(".modal-popup")) {
            document.querySelector(".modal-popup").style.display = "none";
          }
        }
     }
        
</script>