Apply the right content to a modal with jQuery and the right button id's

Question

So lets be straight to the point;

I am using a WP theme and obviously it has some widgets in it. Now I want to add 1 button to each widget.

Var instance would be the widgets so I only add buttons aslong as there are widgets. The a tag is designed to be a button.

<?php
    $i = 0;
    while($i <= count($instance)) {
        $id = $i
    }

echo "<a id='stats".$id."' data-toggle='modal' data-target='#Modal' class='btn btn-primary custom-button oceanblue-btn'>Link</a>";
?>

For each(?) button the id should +1, so Widget 1 would contain a button with ID="stats0", Widget 2 would have a button with ID="stats1" and so on.

This way I can get the element trough jQuery and show the modal with the right content, correct?

But the question itself; How can I get the id to increase by 1 when I have to set the buttons outside of the loop?

UPDATE As Trincot mentioned, it isn't really clear what the thing is that I want to accomplish.

You can check out the live version which is here.

If you scroll down to the second section, you'll see 6 circle which contains an image and text. The maker of the theme calls these things instances within the code;

 function widget($args, $instance)
{

    extract($args);


    echo $before_widget;

    ?>



    <div class="col-lg-3 col-sm-3 focus-box" data-scrollreveal="enter left after 0.15s over 1s">

        <?php if( !empty($instance['image_uri']) ): ?>
        <div class="service-icon">

            <?php if( !empty($instance['link']) ): ?>

                <a href="<?php echo $instance['link']; ?>"><i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON--></a>

            <?php else: ?>

                <i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON-->

            <?php endif; ?>


        </div>
        <?php endif; ?>

        <h5 class="red-border-bottom"><?php if( !empty($instance['title']) ): echo apply_filters('widget_title', $instance['title']); endif; ?></h5>
        <!-- FOCUS HEADING -->


        <?php 
            if( !empty($instance['text']) ):

                echo '<p>';
                    echo htmlspecialchars_decode(apply_filters('widget_title', $instance['text']));
                echo '</p>';
            endif;
        ?>

        <?php
            for($i =0; $i <= count($instance); $i++) {
                echo "<a id='stats$i' data-toggle='modal' data-target='#Modal' class='btn btn-primary custom-button oceanblue-btn'>Link</a>";
            }
        ?>
    </div>



    <?php

    echo $after_widget;


}

Inside this function the elements get rendered one by one, if I'm right?

So what I wanted to do is apply a button to each element. When the ID's are set I have something to refer to within my jQuery to define the content of the model. This is code which execute the rendering of the elements

<div class="row focus-section">



        <?php

        if ( is_active_sidebar( 'sidebar-ourfocus' ) ) :

            dynamic_sidebar( 'sidebar-ourfocus' );

        else:

            the_widget( 'zerif_ourfocus','title=PARALLAX EFFECT&text=Create memorable pages with smooth parallax effects that everyone loves. Also, use our lightweight content slider offering you smooth and great-looking animations.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/parallax.png", array('before_widget' => '', 'after_widget' => '') );

            the_widget( 'zerif_ourfocus','title=WOOCOMMERCE&text=Build a front page for your WooCommerce store in a matter of minutes. The neat and clean presentation will help your sales and make your store accessible to everyone.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/woo.png", array('before_widget' => '', 'after_widget' => '') );

            the_widget( 'zerif_ourfocus','title=CUSTOM CONTENT BLOCKS&text=Showcase your team, products, clients, about info, testimonials, latest posts from the blog, contact form, additional calls to action. Everything translation ready.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/ccc.png", array('before_widget' => '', 'after_widget' => '') );

            the_widget( 'zerif_ourfocus','title=GO PRO FOR MORE FEATURES&text=Get new content blocks: pricing table, Google Maps, and more. Change the sections order, display each block exactly where you need it, customize the blocks with whatever colors you wish.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/ti-logo.png", array('before_widget' => '', 'after_widget' => '') );

        endif;

        ?>



</div>

Now you probably will need to know what 'dynamic_sidebar' is.. but untill now I haven't found that piece yet

Answer 1

You should generate the buttons inside the loop, and you don't need two variables when the only thing you do is make them equal. And such loops are best written with a for loop:

for($i =0; $i <= count($instance); $i++) {
    echo "<a id='stats$i' data-toggle='modal' data-target='#Modal'
        class='btn btn-primary custom-button oceanblue-btn'>Link</a>";
}

Note also you had a missing ending quote for the id attribute, and that you can embed variables without interrupting the quoted string.

jQuery Solution

You could also decide to leave the php code alone, and just manipulate the document with jQuery. For starters, you could add an id attribute to each of the instances, which have a class pixeden. And then you could capture click events on these, to perform any further action:

jQuery(function($) {
  // Add an id attribute to the instances:
  $(".pixeden").each(function(idx) {
    $(this).attr('id', 'instance' + idx);
  })
  // Capture click event on any of the instances:
  $(".pixeden").click(function () {
      console.log('you clicked instance with id=', this.id);
      // any other action follows here...
  });
}, jQuery);