I’ve been attempting to create a plugin that takes some ACF options page fields, and creates a shortcode which outputs an advertising code attached to an attribute

e.g. [awin id=”top_banner”] would ideally return the code specified for that ID
whereas [awin id=”middle_banner”][awin id=”bottom+banner”] would return the code for each banner respectively, wherever the shortcode was found on the page.

I also added the ability to show and hide ads via an ACF boolean toggle switch, which I think could be the thing that’s causing headaches.

The problem I’m having is that if an ad is hidden, for example the “middle_banner” was hidden, when you scroll down to the output for bottom_banner, you see the output for “middle_banner” instead. This is also happening on pages that only include the shortcode for top and bottom banners, it is returning the top and middle banners, but the middle is output where the bottom should be.

My code is below – I hope I’ve explained it clearly enough!

// THIS LOOPS THROUGH ADS AND CREATES SHORTCODE ID's within attributes / and assigned ad code to return

           // WP Shortcode to display text on page or post.
           
           // [awin id="top_banner"]
           function awin_func( $atts ) {

            if( have_rows('awin_ads', 'option') ):
               
               while( have_rows('awin_ads', 'option') ): the_row(); 
                   $embed_code = get_sub_field('awin_ad_embed_code');
                   $short_code = get_sub_field('shortcode');
                   $short_code = preg_replace('/\s+/', '_', $short_code);  /replaces spaces with underscores from input
                   $is_live = get_sub_field('is_showing');

                   $atts = shortcode_atts( array(
                       'id' => $short_code,
                       'embed_code' => $embed_code,
                   ), $atts );

                   extract($atts);

                   $output="";

                   if($is_live == true) {

                    $output .= '<div id="' . $id . '" style="color:#a0a0a0; text-align:center;"> <hr><p style="margin:0;">Advert</p><br>' . $embed_code . '<hr></div>'; 

                  }    
                  
                  return $output;
               

               endwhile;
              

            endif;
         }

      remove_shortcode( 'awin' ); //resets shortcode so changes occur on front end when changed

      add_shortcode( 'awin', 'awin_func' );

?>

Funnily enough, however, when you inspect the code on the front end, the id attribute is always been passed through to the div id within the output correctly. This is what’s really confusing me!

Any help would be most appreciated