title: Trying to find previous DOM elements and get input value jquery
body: <p>I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should I do? Any help is appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.update_button').on("click",function(){
   var update_val_1 = $(this).prev().find('input:first').val();
   var update_val_2 = $(this).prev().find('input:nth-child(2)').val();
  
   alert(update_val_1);
   alert(update_val_2);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;tr class="gridtable"&gt;
      &lt;td&gt;&lt;input type="text" value="apple" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" value="one" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button type="button" class="update_button"&gt;UPDATE&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="gridtable"&gt;
      &lt;td&gt;&lt;input type="text" value="banana" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" value="three" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button type="button" class="update_button"&gt;UPDATE&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="gridtable"&gt;
      &lt;td&gt;&lt;input type="text" value="berry" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" value="ten" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button type="button" class="update_button"&gt;UPDATE&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>