title: Jquery for loop to set input value from selected option's attribute only changing last value
body: <p>I want to simplify this lump of code (it's actually much longer), which is working perfectly:</p>
  
  <pre><code>$(document).ready(function() {
    $("#PayRate1").change(function() {
             $('#HourlyRate1').val($('option:selected', this).data('rate'));
    });
    $("#PayRate2").change(function() {
             $('#HourlyRate2').val($('option:selected', this).data('rate'));
    });
    $("#PayRate3").change(function() {
             $('#HourlyRate3').val($('option:selected', this).data('rate'));
    });
    $("#PayRate4").change(function() {
             $('#HourlyRate4').val($('option:selected', this).data('rate'));
    });
    $("#PayRate5").change(function() {
             $('#HourlyRate5').val($('option:selected', this).data('rate'));
    });
    $("#PayRate6").change(function() {
             $('#HourlyRate6').val($('option:selected', this).data('rate'));
    });
    $("#PayRate7").change(function() {
             $('#HourlyRate7').val($('option:selected', this).data('rate'));
    });
  });
  </code></pre>
  
  <p>So I made the following loop:</p>
  
  <pre><code>$(document).ready(function() {
      for(i=1;i&lt;7;i++){
          $('#PayRate'+i).change(function() {
              $('#HourlyRate'+i).val($('option:selected', this).data('rate'));
            });
          }
  });
  </code></pre>
  
  <p>However, when I select any option from the selects #PayRate1 through to PayRate6 they don't cause their corresponding #HourlyRate to change, but rather they all change #HourlyRate7.  If I change #PayRate7 then nothing changes.</p>
  
  <p>What is my error here?  I'm pretty new to all this and it is my first attempt at writing a loop so knowing why my loop causes this problem would be very helpful to learn from.</p>
  
  <p>EDIT:</p>
  
  <p>Here is the html it is acting upon:</p>
  
  <pre><code>        &lt;?php
          $numbers = range(1,14);
          foreach ($numbers as $number)
          {
            echo '&lt;div class="row"&gt;';
            echo '  &lt;div class="input-field col-1"&gt;';
            echo '    &lt;input type="text" class="validate" id="Date'.$number.'" value="" name="Date'.$number.'" readonly="readonly" required="" aria-required="true"&gt;';
            echo '  &lt;/div&gt;';
            echo '  &lt;div class="input-field col-1"&gt;';
            echo '    &lt;input type="text" class="validate" id="Day'.$number.'" value="" name="Day'.$number.'" readonly="readonly" required="" aria-required="true"&gt;';
            echo '  &lt;/div&gt;';
            echo '  &lt;div class="input-field col-1"&gt;';
            echo '    &lt;select name="PayRate'.$number.'" id=PayRate'.$number.'&gt;';
            echo "      &lt;option value='' disabled='disabled'&gt;Select Rate&lt;/option&gt;";
            echo "      &lt;option data-rate='".$Rate1."' value='".$RateName1."'&gt;".$RateName1."&lt;/option&gt;";
            echo "      &lt;option data-rate='".$Rate2."' value='".$RateName2."'&gt;".$RateName2."&lt;/option&gt;";
            echo "      &lt;option data-rate='".$Rate3."' value='".$RateName3."'&gt;".$RateName3."&lt;/option&gt;";
            echo "      &lt;option data-rate='".$Rate4."' value='".$RateName4."'&gt;".$RateName4."&lt;/option&gt;";
            echo '    &lt;/select&gt;';
            echo '  &lt;/div&gt;';
            echo '  &lt;div class="input-field col-1"&gt;';
            echo '    &lt;input type="text" class="RateValue" id="HourlyRate'.$number.'" name="HourlyRate'.$number.'" readonly="readonly" required="" aria-required="true"&gt;';
            echo '  &lt;/div&gt;';
            echo '  &lt;div class="input-field col-1"&gt;';
            echo '    &lt;input type="text" class="validate" id="Hours'.$number.'" name="Hours'.$number.'" required="" aria-required="true"&gt;';
            echo '  &lt;/div&gt;';
            echo '  &lt;div class="input-field col-1"&gt;';
            echo '    &lt;input type="text" class="validate" id="Overtime'.$number.'" name="Overtime'.$number.'" required="" aria-required="true"&gt;';
            echo '  &lt;/div&gt;';
            echo '&lt;/div&gt;';
  
        }
        ?&gt;
  </code></pre>