title: Passing Variables To onChange Event with jQuery .change()
body: <p>I'm writing a simple web application and have hit a stumbling block of sorts - I've already found a workaround, but I'd like to understand what I'm doing wrong having scoured the jQuery documentation.</p>
  
  <p>I have a function, that when called from the page, inserts a table row:</p>
  
  <pre><code>var rowCount = 0;
  function addRow(tbody){
      $("#"+tbody).append(
          $('&lt;tr&gt;').attr('id','row_'+rowCount).append(
              $('&lt;td&gt;').append('Content'),
              $('&lt;td&gt;').append($('&lt;input&gt;').addClass('text').attr('readOnly','readOnly')),
              $('&lt;td&gt;').append($('&lt;input&gt;').addClass('text').attr('readOnly','readOnly')),
              $('&lt;td&gt;').attr('id','barcode_cell'+rowCount),
              $('&lt;td&gt;').append($('&lt;input&gt;').addClass('text').addClass('quantity').attr('maxLength',3)),
              $('&lt;td&gt;').append($('&lt;select&gt;').change(function(){isMissing(this,rowCount)}))        
              )
      );
  }
  </code></pre>
  
  <p>Where I am primarily concerned with the final <code>&lt;select&gt;</code> box and it's onChange event. My isMissing function:</p>
  
  <pre><code>function isMissing(elem, counter){
    alert(elem.value);
    alert(counter);
  }
  </code></pre>
  
  <p>What happens is the selected value of the  box alerts as expected, however, the row number <strong>always</strong> alerts the latest row, regardless of which row is calling it. Instead I want it to hold the value of the rowCount variable as it was when the row was introduced, not the latest value of the variable after I have added additional rows. </p>
  
  <p>What am I doing wrong? How do I force the variable to remain static? I have to use a global variable as there is more than one function that adds rows to more than one table, this is the only way I can ensure each row in any table has a unique identifier.</p>