title: Moving a JS Function from on load to when called
body: <p>I have the following JS function which I have been using for quite some time, copied almost verbatim out of another Stack Overflow question. I have found that rather that as my needs have changed, I need to instead call this function from a button and pass the value of count as a parameter rather than tracking it in the function.</p>
  
  <p>I tried changing it to "function addInventory(count)" and moving the var template line inside of it, however Firebug reports "SyntaxError: missing variable name" for the var inventory line and I can't figure out whats wrong.</p>
  
  <p>What is the issue with this?</p>
  
  <p>Original Function:</p>
  
  <pre><code>$(function()
  {
      var template = $('#inventoryItems .inventory:first').clone(),
          inventoryCount = 0;
  
      var addInventory = function()
      {
          inventoryCount++;
          var inventory = template.clone().find(':input').each(function()
          {
              var newLabel = "invItem[" + inventoryCount + "]";
              $(this).prev().attr('id', newLabel);
              $(this).prev().attr('name', newLabel);
          }).end()
          .attr('id', 'inv' + inventoryCount)
          .appendTo('#inventoryItems &gt; fieldset');
      };
  
      $('.btnAddInventory').click(addInventory);
  });
  </code></pre>
  
  <p>New Function:</p>
  
  <pre><code>function addInventory(count)
  {
      var template = $('#inventoryItems .inventory:first').clone(),
  
      var inventory = template.clone().find(':input').each(function()
      {
          var newLabel = "invItem[" + count + "]";
          $(this).prev().attr('id', newLabel);
          $(this).prev().attr('name', newLabel);
      }).end()
      .attr('id', 'inv' + count)
      .appendTo('#inventoryItems &gt; fieldset');
  };
  </code></pre>