title: How can I change span text based on the button clicked?
body: <p>I want to change the amount shown on the html page after user clicks on them. There are 2 buttons and upon clicking each button, it should direct them to a new html and the amount should change accordingly. I know this isn't really the method to do it but I am unsure how else can I do it. Currently, I am only able to append all the amount.</p>
  
  
  
  <pre><code>&lt;button onclick="myFunction1()" type="submit" id="one"&gt;BUY&lt;/button&gt;
  &lt;button onclick="myFunction2()" type="submit" id="two"&gt;BUY&lt;/button&gt;
  </code></pre>
  
  
  
  <pre><code>function myFunction1() {
      window.location='pay.html';
  };
  
  function myFunction2() {
      window.location = 'pay.html';
  };
  </code></pre>
  
  
  
  <pre><code> &lt;span class="title" id="total"&gt;&lt;/span&gt;
   &lt;span class="title" id="total2"&gt;&lt;/span&gt;
  </code></pre>
  
  
  
  <pre><code>(function () {
      "use strict";
  
      $().ready(function () {
  
      })
      myFunction1()
  
      function myFunction1() {
          var totalamt = '$100';
          $('#total').html("&lt;span style='float:right'&gt;" + "Total:" + 
          totalamt + "&lt;/span&gt;");
      }
  
  })();
  
  (function () {
      "use strict";
  
      $().ready(function () {
  
      })
      myFunction2()
  
      function myFunction2() {
          var totalamt2 = '$300';
          $('#total2').html("&lt;span&gt;" + "Total:" + totalamt2 + 
          "&lt;/span&gt;");
      }
  })();
  </code></pre>
  
  <p>Want to achieve the results of: e.g. by clicking the first button, redirects user to  pay.html and show $100. By clicking the second button, redirects to the same html(pay.html), show $300. Please help thanks a lot.</p>