I am creating a page to generate coupon code and I am using the modal bootstrap to open a modal with the coupon data, however when I click on one of the buttons opens all at the same time, how can I solve this?
<div class="cupons">
<div class="container">
<h1>Cupons</h1>
<div class="row">
<?php
$args = array('post_type'=>'cupons', 'showposts'=>-1);
$my_cupons = get_posts( $args );
$count = 0; if($my_cupons) : foreach($my_cupons as $post) : setup_postdata ($post) ;
?>
<div class="col-md-3 col-lg-3">
<div class="cupons-box">
<p> <?php the_title(); ?> </p>
<?php the_post_thumbnail(false, array('class' => 'img-responsive')); ?>
<!-- Small modal -->
<button type="button" class="btn btn-danger btn-custom center-block" data-toggle="modal" data-target=".bs-example-modal-sm">Gerar cupom</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><?php echo rwmb_meta('titulo'); ?></h4>
</div>
<div class="modal-body">
<p>Acesso o site <a href="<?php echo rwmb_meta('url'); ?>">clicando aqui!</a></p>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">Código:</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" value="<?php echo rwmb_meta('codigo-cupom'); ?>">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default center-block" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
endforeach;
endif;
?>
<div class="clearfix"></div>
</div>
</div>