title: jQuery val() returning previously selected element value
body: <p>I have a javascript function that handle dynamic IDs from a table.</p>
  
  <p>TABLE:</p>
  
  <pre><code>&lt;table border = "0" width = "95%"  class = "table table-striped table-bordered" id = "tblInfoChecks"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;center&gt;#&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Category&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Name&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Date&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Due Date&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Allocation&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Status&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;TAT&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Action&lt;/center&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;?php                   
              $q = "SELECT * FROM checks WHERE candidate_id = '$case_id' AND client_id = '$client_id'";
              $res = mysql_query($q);
              $numR = mysql_numrows($res);
              $y = 0;
  
              while($y &lt; $numR){
  
                  $m = $y + 1;
                  $check_id = mysql_result($res, $y, "case_id");          
                  $check_name = mysql_result($res, $y, "check_name"); //hidden
                  $check_cat = mysql_result($res, $y, "check_category"); //hidden
                  $elements = mysql_result($res, $y, "elements"); //hidden
  
                  //verified information -- hidden
                  $ver_status = mysql_result($res, $y, "ver_status");
                  $ver_remarks = mysql_result($res, $y, "ver_remarks");
                  $ver_action = mysql_result($res, $y, "ver_action");
                  $overall_status = mysql_result($res, $y, "overall_status");
  
                  $check_date = mysql_result($res, $y, "date_to_process");
                  $check_due_date = mysql_result($res, $y, "due_date");
                  $ver_id = mysql_result($res, $y, "verifier_id");
                  $check_status = mysql_result($res, $y, "status");
  
  
                  //hidden elements
                  echo '&lt;input type = "text" style = "" id = "txtInfoCheckID'.$y.'" value = "'.$check_id.'" /&gt;';
                  echo '&lt;input type = "text" style = "" id = "txtInfoCheckName'.$y.'" value = "'.$check_name.'" /&gt;';
                  echo '&lt;input type = "text" style = "" id = "txtInfoCheckCat'.$y.'" value = "'.$check_cat.'" /&gt;'; 
                  echo '&lt;input type = "text" style = "" id = "txtInfoCheckElements'.$y.'" value = "'.$elements.'" /&gt;';
                  echo '&lt;input type = "text" style = "" id = "txtInfoCheckVerStatus'.$y.'" value = "'.$ver_status.'" /&gt;';
                  echo '&lt;input type = "text" style = "" id = "txtInfoCheckVerRemarks'.$y.'" value = "'.$ver_remarks.'" /&gt;';
                  echo '&lt;input type = "text" style = "" id = "txtInfoCheckVerAction'.$y.'" value = "'.$ver_action.'" /&gt;';
                  echo '&lt;input type = "text" style = "" id = "txtInfoCheckOverallStatus'.$y.'" value = "'.$overall_status.'" /&gt;';
  
                  //get verifier name
                  $ver = "SELECT name FROM employees WHERE id = '$ver_id'";
                  $ver_res = mysql_query($ver);
                  $ver_numR = mysql_numrows($ver_res);
                  if($ver_numR != 0){
                      $ver_name = mysql_result($ver_res, 0 ,0);
                  } 
  
                  //compute TAT
                  $check_date_sec = strtotime($check_date);
                  $today = strtotime(date("m/d/Y", time()));
                  $tat = $today - $check_date_sec;
                  $time_arr = secondsToTime($tat);
                  $final_tat = $time_arr["d"]; //tat
  
                  echo '
                      &lt;tr&gt;
                          &lt;td&gt;&lt;center&gt;'.$m.'&lt;/center&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;center&gt;'.$check_cat.'&lt;/center&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;center&gt;'.$check_name.'&lt;/center&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;center&gt;'.$check_date.'&lt;/center&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;center&gt;'.$check_due_date.'&lt;/center&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;center&gt;'.$ver_name.'&lt;/center&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;center&gt;'.$check_status.'&lt;/center&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;center&gt;'.$final_tat.'&lt;/center&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;center&gt;&lt;a href = "javascript: void(0);" id = "viewInfoCheckElements'.$y.'"&gt;View Elements&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
                      &lt;/tr&gt;                   
                  ';              
  
                  $y++;
              }
  
          ?&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;center&gt;#&lt;/center&gt;&lt;/th&gt; 
              &lt;th&gt;&lt;center&gt;Category&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Name&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Date&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Due Date&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Allocation&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Status&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;TAT&lt;/center&gt;&lt;/th&gt;
              &lt;th&gt;&lt;center&gt;Action&lt;/center&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var rowCount_infoChecks = $('#tblInfoChecks &gt;tbody &gt;tr').length;                                                                                    
  for(var i = 0; i &lt; rowCount_infoChecks; i++)
  {ViewInfoChecks(i);}
  </code></pre>
  
  <p>ViewInfoChecks:</p>
  
  <pre><code>function ViewInfoChecks(place){
          $('#viewInfoCheckElements'+place).livequery(function(){
              $('#viewInfoCheckElements'+place).live("click", function(e){
                  var check_id = $('#txtInfoCheckID'+place).val();
              alert(check_id);                
                  var check_name = $('#txtInfoCheckName'+place).val();                
                  var check_cat = $('#txtInfoCheckCat'+place).val();
                  var check_elem = $('#txtInfoCheckElements'+place).val();
                  var ver_status = $('#txtInfoCheckVerStatus'+place).val();
                  var ver_remarks = $('#txtInfoCheckVerRemarks'+place).val();
                  var ver_action = $('#txtInfoCheckVerAction'+place).val();
                  var overall_status = $('#txtInfoCheckOverallStatus'+place).val();
  
  
                  $.post(
                      "posts/view-check-elements.php",
                      {
                          check_name : check_name,
                          check_cat : check_cat,
                          check_elem : check_elem,
                          ver_status : ver_status,
                          ver_remarks : ver_remarks,
                          ver_action : ver_action,
                          overall_status : overall_status
                      },
                      function(data){
                          $('#popupViewInfoChecks').html(data);
                          $('#popupViewInfoChecks').lightbox_me({
                              centered: true
                          });
                          e.preventDefault();
                      }
                  );
  
              });
          });
      }
  </code></pre>
  
  <p>Every time I load the table to a div element using <code>$('#').html(data);</code> it loaded properly and I try to unhide the hidden values and the element values are properly placed. But when I access it through a <code>$('#').val()</code> and alert the values it becomes inconsistent. Sometimes when I access the element the previous selected value is the one that is appearing so my assumption is it is related to the browser but when I try to clear the cache it still appearing so I think the problem is my code. </p>
  
  <p>Example:</p>
  
  <ul>
  <li>The value of the input selector with ID myID0 is "boy";</li>
  <li>I alert the value of myID0 and the value boy is correct</li>
  <li>I try to load the table again and query different values so the boy
  becomes girl</li>
  <li>I alert the value of the same selector myID0, the value is still boy
  and the newly assigned value(girl) was not recognized by the selector
  myID0.val();</li>
  </ul>