how to reveal coupon code using php

Question

i Want to reveal coupon code on button click

  <script type='text/javascript' >
   jQuery('#id1').click(function(){
   jQuery(this).replaceWith("<?php echo $_coupon?>");
  })
</script> 

<?php if ($_coupon != '' ):?>
 <button   id="id1" type="button" class="but" value="Button Name">     </button>
<?php endif; ?>

This is my code it works only with first button click that means show only one value not works as a loop please help me to solve my problem

Answer 1

I would do it this way:

<script type='text/javascript' >
   jQuery('#id1').click(function(){
      jQuery(this).replaceWith(jQuery(this).val());
   })
</script> 

<?php if ($_coupon != '' ):?>
  <button id="id1" type="button" class="but" value="<?php echo $_coupon ?>"></button>
<?php endif; ?>

Answer 2

I would add a hidden input like this:

<?php if ($_coupon != '' ):?>
    <input type="hidden" id="coupon" value="<?php echo $_coupon ?>" />
    <button id="id1" type="button" class="but" value="Button Name"></button>
<?php endif; ?>

Then in the jquery get the value from the object:

  <script type='text/javascript' >
       jQuery('#id1').click(function(){
          jQuery(this).replaceWith($('#coupon').val());
       })
  </script>

Answer 3

<script type='text/javascript' >
   jQuery('#id1').click(function(){
   jQuery(this).replaceWith("<?php echo $_coupon; ?>");
  });
</script> 

<?php if ($_coupon != '' ):?>
 <button   id="id1" class="but" value="Button Name"></button>
<?php endif; ?>

It's working correctly. Check the id of the button is already defined in various place of this page. because the id must be unique.

Also try this one,

<script type='text/javascript' >
    $(document).ready(function(){
       $('#id1').click(function(){
       $(this).replaceWith("<?php echo $_coupon; ?>");
      });
    });
</script> 

Also check jquery library included or not