title: Multiple textboxes fill the dropdown selection having same class in jquery
body: <p>I have used the concept of multiple textboxes having same class fill with the multiple dropdown option selection which also having same class.I have facing problems in it.when i click the first dropdown option then it change the second textbox value.I want that if i click on first dropdown option it changes the values of first textbox not other or if click the second dropdown option it will change the value of second textbox.</p>
  
  <pre><code>&lt;form action="" method="post"&gt; 
      &lt;select name="drop[]" id="budget" class="drop"&gt; 
          &lt;option value="1"&gt;option1&lt;/option&gt; 
          &lt;option value="2"&gt;option2&lt;/option&gt;
          &lt;option value="3"&gt;option3&lt;/option&gt; 
      &lt;/select&gt;
      &lt;input type="text" name="txt" id="txt" class="txt" value="text1"&gt;&lt;br&gt; 
      &lt;select name="drop[]" id="budget1" class="drop"&gt; 
          &lt;option value="1"&gt;option1&lt;/option&gt;
          &lt;option value="2"&gt;option2&lt;/option&gt;
          &lt;option value="3"&gt;option3&lt;/option&gt; 
      &lt;/select&gt;
      &lt;input type="text" name="txt" id="txt1" class="txt" value="text2"&gt;
  
  &lt;/form&gt; 
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$('input[name="txt"]').each(function () { 
      $('.drop').on('change', function(){
          var total = $(this).val();
          $('input[name="txt"]').val($(this).find("option:selected").attr("value")); 
      });
  });
  </code></pre>