title: jQuery function ignoring incremented value
body: <p>I can't seem to fix this issue, and after two hours or so I gave up. I am not good with javascript at all. </p>
  
  <p>Here's a jfiddle with a nice jquery I found around here:</p>
  
  <pre><code> [html]
  &lt;button id="addProduct"&gt;Add Product&lt;/button&gt;
  &lt;div id="someContainer"&gt;&lt;/div&gt;
  &lt;span&gt;&lt;/span&gt;
  
  
  [javascript]
  var i = 1;
  $("#addProduct").click(function() {
  $("&lt;div /&gt;", { "class":"wrapper", id:"product"+i })
   .append($("&lt;input /&gt;", { type: "text", id:"name"+i }))
   .append($("&lt;input /&gt;", { type: "text", id:"property"+i }))
   .appendTo("#someContainer");
  i++;
  });
  
  $("input").live("click", function() {
   $("span").text("Clicked ID: " + this.id);
  });
  </code></pre>
  
  <p>It appends two new inputs with a unique id. Now what I want to do is use on() to reset the value of a different input when on "focus". The thing is, I want it to clear its corresponding input so for example focusing on "id=name1" would reset "id=property2" and vice verse, focusing "id=name2" would reset "id=property2" vice versa and so on...</p>
  
  <p>So I added to it:</p>
  
  <pre><code>var i = 1;
     $("#addProduct").click(function() {
     $("&lt;div /&gt;", { "class":"wrapper", id:"product"+i })
     .append($("&lt;input /&gt;", { type: "text", class:"name"+i }))
     .append($("&lt;input /&gt;", { type: "text", class:"property"+i }))
     .appendTo("#someContainer");
  
  $("#product"+i).on("focus", $(".name"+i), function() {
   $(".property"+i).val("");
  });
  
  $("#product"+i).on("focus", $(".property"+i), function() {
    $(".name"+i).val("");
  });
  
  i++;
  
  });
  </code></pre>
  
  <p>But for whatever reason, I cannot get these inputs to reset. The function seems to be ignoring the incrementing values. if I remove var i it seems to work but then it clears all my inputs. Logically adding "+i" to the end of the class should fix the issue but it doesn't. I have tried using  different form of selection the class:</p>
  
  <pre><code>$("#product"+i).find(".name"+i);
  </code></pre>
  
  <p>but this doesn't seem to help either.  I really don't understand what is wrong with this. If someone could help I'd greatly appreciate thanks.</p>