title: how to get a particular cell from a dynamically added row based on its id in jQuery
body: <p>I have a table with the id <code>line-creation-table</code> which grows or shrinks dynamically. Each row in this table looks like this:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;&lt;input type="text" name="brand" /&gt;&lt;/td&gt;
  
      &lt;td&gt;&lt;input type="text" name="itemRefNo" id="itemRefNo"/&gt;&lt;/td&gt;
  
      &lt;td&gt; &lt;input type="number" name="quantity" value="1"/&gt;&lt;/td&gt;
  
      &lt;td&gt; &lt;input type="text" name="unitPrice" /&gt;&lt;/td&gt;
  
      &lt;td&gt;&lt;input type="date" name="deliveryDate" /&gt;&lt;/td&gt;
  
      &lt;td&gt;&lt;input type="button" value="Show Previous Actions" id="showPreviousActions"/&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  </code></pre>
  
  <p>these rows are added dynamically. Now when the <code>showPreviousActions</code> button is clicked I want to retrieve the value from <code>itemRefNo</code> cell from the row where the button is clicked.</p>
  
  <p>I tried this:</p>
  
  <pre><code>$("#line-creation-table").on('click', 'input[id="showPreviousActions"]', function(event) {
      var itemRefNo = $(this).parent().find('input[id="itemRefNo"]').val();
  }
  </code></pre>
  
  <p>and this:</p>
  
  <pre><code>var itemRefNo = $(event.target).closest('input[id="itemRefNo"]').val();
  </code></pre>
  
  <p>but neither worked. When I console log the <code>itemRefNo</code> variable I get <code>undefined</code>. How can I solve it? Thank you very much.</p>