title: Why is this javascript object referring to a previous object's properties?
body: <p>I am creating a class that can create any number of captchas on a page.I have a <code>captcha</code> class that I am using to instantiate new captcha objects <code>c1</code> and <code>c2</code>. Here is my JS:</p>
  
  <pre><code> $(function(){
      var captcha = {
          parentForm : '',
          container : '',
          captcha_input : '',
          number1 : 0,
          number2 : 0,
  
          createCaptcha : function(form_ID){
              var newHtml;
              this.parentForm = $('#' + form_ID);
              this.container = this.parentForm.find('.captchaContainer');
              this.number1 = this.randomNumber(10);
              this.number2 = this.randomNumber(10);
  
  
              newHtml = 'What does ' + this.number1 + ' plus ' + this.number2 + ' equal? &lt;b class="required goldenrod" title="Required Field"&gt;*&lt;/b&gt;&lt;br/&gt;&lt;br/&gt;&lt;input type="text" name="captcha"&gt;';
              this.container.html(newHtml);
          },
  
          isValid : function(){
              console.log(this.container);
              this.captcha_input = this.container.find('input[name="captcha"]');
              if (this.number1 + this.number2 == this.captcha_input.val()) {
                  this.captcha_input.css('background-color', '')
                  return true;
              } else{
                  this.captcha_input.css('background-color', '#FFCCCC')
                  alert(this.number1 + ' plus ' + this.number2 + ' does not equal ' + this.captcha_input.val() + '. Please try again.');
                  this.captcha_input.focus();
                  return false;
              }
          },
  
          randomNumber : function(max){ return Math.floor(Math.random()*(max+1)); }
      }
  
  
      var c1 = captcha,
          c2 = captcha;
  
      c1.createCaptcha("form1");
      c2.createCaptcha("form2");
  
      $('#form1 input[type="submit"]').click(function() { 
          if(c1.isValid()){
              alert('Captcha is valid!');
          }else{
              return false;
          }
      });
      $('#form2 input[type="submit"]').click(function() { 
          if(c2.isValid()){
              alert('Captcha is valid!');
          }else{
              return false;
          }
      });
  
  
  });
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;form id="form1"&gt;
      &lt;div class="captchaContainer"&gt;&lt;/div&gt;
      &lt;input type="submit"&gt;
  &lt;/form&gt;
  &lt;form id="form2"&gt;
      &lt;div class="captchaContainer"&gt;&lt;/div&gt;
      &lt;input type="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When I click on <code>form1</code>'s submit button, it seems like the <code>isValid</code> method is being ran for <code>c2</code> and not <code>c1</code> like I expect. Any idea why this is doing so?</p>
  
  <p>A few things to note:</p>
  
  <ul>
  <li>If I add more <code>captcha</code> instances and HTML, each submit button will run <code>isValid</code> on the last instance of <code>captcha</code> on click.</li>
  <li>This needs to work for IE8+</li>
  </ul>
  
  <p>Here is a <a href="http://jsfiddle.net/fmpeyton/GBp9r/" rel="nofollow">fiddle</a> of the code in action.</p>
  
  <p>Any help would be greatly appreciated. Thanks!</p>