Echo Extra Shortcode HTML to wp_foot

I’m making a button shortcode that requires to attach extra HTML element to wp_foot for each shortcode added.

function action_button_shortcode( $atts, $content = null ) {
  extract( shortcode_atts(
    array(
      'title' => 'Title',
      'color' => 'blue', // blue, green
      'url' => 'url',
      'icon' => 'arrow',  // arrow, download, email, search, account, lock
      'level' => 'primary', // primary, secondary, tertiary
      'target' => 'self', // blank, self
    ),
    $atts
  ));
  if($target == 'modal'){
    return '<span class="byn-btn btn-' . $level . ' bg-' . $color . ' icon-' . $icon . '" data-toggle="modal" data-target="#modal' . url_to_postid( $url ) . '"><span>' . $title . '</span></span>';
  } else {
    return '<a href="' . $url . '" class="byn-btn btn-' . $level . ' bg-' . $color . ' icon-' . $icon . '" target="_' . $target . '"><span>' . $title . '</span></a>';
  }
  $content = wpautop(trim($content));
}
add_shortcode( 'ci-action-button', 'action_button_shortcode' );

When user set 'target' => 'modal', it will add this extra HTML to wp_foot. Something like loop, since there can be multiple buttons added to the page

<div class="modal fade" id="modal' . url_to_postid( $url ) . '" tabindex="-1" role="dialog" aria-labelledby="modal' . url_to_postid( $url ) . 'Label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content subscribe-fields">
      <div class="modal-body">
        <div class="fullframe"><iframe width="100%" src="'. $url .'" class="fullHeight"></iframe></div>
      </div>
    </div>
  </div>
</div>

How to do that?