title: How do I Use a variable multiple times in different functions
body: <p>I am attempting to make a tip calculator, this takes in the total cost of the meal a tip (through a button) and the total amount of people. Although when I am attempting to get the value of the button to do my calculation I am unable to do so. </p>
  
  <p>I have tried to just run the function on load although that only gives me the value of the button once when the page loads and not when it has been clicked.</p>
  
  <p>What I am trying to do is know when the button has been pressed, take the value from it and then use that for my further calculations although when attempting to do so the variable is undefined and I can not use it in my main calculations function.</p>
  
  <p>How would I go about solving this?</p>
  
  <p><a href="https://jsfiddle.net/w7f4spx3/1/" rel="nofollow noreferrer">Jsfiddle</a> </p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;h1&gt;Tip Calculator&lt;/h1&gt;
  &lt;div class="inputs"&gt;
    &lt;input type="number" id="bill-amount" placeholder="Bill"&gt;
    &lt;div id="buttons"&gt;
      &lt;button value="5" class="btn"&gt;5%&lt;/button&gt;
      &lt;button value="10" class="btn"&gt;10%&lt;/button&gt;
      &lt;button value="15" class="btn"&gt;15%&lt;/button&gt;
      &lt;button value="20" class="btn"&gt;20%&lt;/button&gt;
      &lt;button value="30" class="btn"&gt;30%&lt;/button&gt;
    &lt;/div&gt;
    &lt;input type="number" id="people-amount" placeholder="# Of people" onkeyup="tipCalculator()"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS </p>
  
  <pre><code>$("button").click(function() {
     var buttonValue = $(this).val();
     console.log(buttonValue);
  });
  
  function tipCalculator() {
     var billAmount = $("#bill-amount").val();
     var peopleAmount = $("#people-amount").val();
     var total = (billAmount * buttonValue) / peopleAmount;
     total = Math.round(total * 100) / 100;
     total = total.toFixed(2);
  }
  </code></pre>