title: How to set a value to a data attribute within a script element
body: <p>I have this code:</p>
  
  <pre><code>&lt;div class="cc-selector col-md-3"&gt;
  &lt;form method="POST" action="&lt;?php echo base_url() . 'home/cart_finish/go'; ?&gt;" class="checkout-form"&gt;
      &lt;input type="hidden" name="payment_type" value="omise"&gt;
      &lt;script src="https://cdn.omise.co/omise.js.gz"
          data-key="&lt;?php echo $omise_public_key_test; ?&gt;"
          data-image=" "
          data-frame-label="Acme"
          data-button-label="&lt;?php echo translate('pay_now');?&gt;"
          data-submit-label="&lt;?php echo translate('submit');?&gt;"
          data-location="no"
          data-amount=" "
          data-currency="us"
          &gt;
  
        var total = $('#grand').html();
        $("[data-amount]").attr('data-amount', total);
       &lt;/script&gt;  
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>I want to set a value to the "data-amount" attribute. I tried with the above code, but it doesn't work.</p>
  
  <p><strong>Note</strong>: Omise is a payment gateway similar to Stripe. That code will render a pay button. I have to had the data-amount set before its render. That's why I cannot wait for the $document to be ready. I hope it makes sense.</p>