title: Simplifying a Javascript Statement
body: <p>I'll just give you a quick idea of the setup before I ask the question:</p>
  
  <p>I currently have a Stock Ordering System that has a list of products and next to each product is 3 divs, a number of many is to be ordered and a + Box and a - box which when clicked increase or decrease the number.</p>
  
  <p>Currently, My Javascript is horrible (Eye Bleedingly so!) I have set the Javascript Code for each individual + &amp; - Button Manually for every Product which just isn't feasible in the long run.</p>
  
  <p>My Code for a single product is as follows</p>
  
  <pre><code>var largebeefburger = 0;
  document.getElementById("largebeefburger").value = largebeefburger;
  function largebeefburgerup(){
  largebeefburger++
  document.getElementById("largebeefburger").value = largebeefburger;
  }
  function largebeefburgerdown(){
   if (largebeefburger &lt;= 0){document.getElementById("largebeefburger").value = largebeefburger;}
  else {
  largebeefburger--
  document.getElementById("largebeefburger").value = largebeefburger;
    }}
  </code></pre>
  
  <p>As you can see this is completely unwieldy and is a nightmare to upgrade.</p>
  
  <p>My Question is:</p>
  
  <p>Is there a way to simplify this down to two functions for every single product? For example</p>
  
  <p>productup
  productdown</p>
  
  <p>Changing the front end is not a problem at all, so If I need to move Divs around so the number becomes a parent of the the buttons that's absolutely fine.</p>
  
  <p>Any help and advise would be greatly appreciated</p>
  
  <p>Thank you.</p>
  
  <p>EDIT (My Html)</p>
  
  <pre><code>&lt;div class="productbox"&gt;Large Beef Burgers (Case)&lt;/div&gt;&lt;div     onClick="largebeefburgerdown()" class="minus"&gt;-&lt;/div&gt;
  &lt;div class="numberbox"&gt;&lt;input name="largebeefburger" type="text" readonly   id="largebeefburger" value=""&gt;&lt;/div&gt;
  &lt;div onClick="largebeefburgerup()" class="plus"&gt;+&lt;/div&gt;
  </code></pre>