Tap to copy discount code is not working in cart drawer Shopify

Question

We want to use tap to copy code in our website built in shopify. Its working in product detail page perfectly but in the cart drawer its working but after page load on the 2nd time.

  {% if cart.total_price > 0 %}
                 <div class="coupon_container">
                      <div class="left_text">
                          <strong>FLAT 50% OFF ON FIRST ORDER</strong>
                          <small>*Applicable on single units.</small>
                      </div>                     
                      <div class="coupon_tab">
                        <span class="copy_coupon"> 
                       <small class="tooltiptext">Copied</small>
                             <!--small>Tap Here to Copy</small-->
                              <small>Use Code</small><br>
                              <strong>FIRST50</strong>
                            </span>
                        </div>  
                    </div>
              <style>
                    .copy_coupon{position:relative;}
                            .tooltiptext{display: none;
                            position: absolute;
                            background: rgb(0 0 0 / 61%);
                            color: rgb(255, 255, 255);
                            top: -25px;
                            padding: 2px 12px;
                            border-radius: 5px}
                      </style>
                    <script>
                      $(document).ready(function(){
                      $(".copy_coupon").click(function() {
                              this.focus();
                              navigator.clipboard.writeText("FIRST50")
                                   .then(() => { console.log("Copy successful"); })
                                   .catch((error) => { alert(`Copy failed! ${error}`); });                          
                      
                      }); 
                       $(".copy_coupon").click(function() {
                      $(".tooltiptext").show();                    
                  });
                       $(".copy_coupon").mouseout(function() {
                       $(".tooltiptext").hide();
                  });
                    });
                      </script> 
    {% endif %}

Answer 1

i have solved this problem using java script. here is the code:-

 function myFunction() { var copyText = document.getElementById("myInput"); copyText.select(); copyText.setSelectionRange(0, 99999); navigator.clipboard.writeText(copyText.value); $(".tooltiptext").show(); setTimeout(function() { $('.tooltiptext').fadeOut('fast'); }, 200); }

 .copy_coupon{position:relative;}.tooltiptext{display: none; position: absolute; background: rgb(0 0 0 / 61%); color: rgb(255, 255, 255); top: -25px; padding: 2px 12px; border-radius: 5px}

 <div class="coupon_container"> <div class="left_text"> <strong>FLAT 50% OFF ON FIRST ORDER</strong> <small>*Applicable on single units.</small> </div> <button class="coupon_tab" onclick="myFunction()"> <span class="copy_coupon" > <small class="tooltiptext">Copied</small> <small>Tap Here to Copy</small> <strong>FIRST50</strong> </span> </button> </div> <input type="text" value="FIRST50" id="myInput" style="width:auto;" >