jquery - How to get the value of an element by class?
<p>I have here a list of items in a table. Each item has a "Select" button on the right. Whenever the user clicks the "Select" button the item or text on the left of the button should display on the <code>span</code>. What happens is when I click the "Select" button all the items is being displayed on the <code>span</code>.</p>

<p>To see the actual scenario: <a href="http://jsfiddle.net/HnAnu/" rel="nofollow">http://jsfiddle.net/HnAnu/</a></p>

<p>My code is down below: </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
 &lt;script type="text/javascript" src="jquery.1.7.2.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
  $(function() {
   $(".btnSelectItem").click(function () {
    $("#spanItemDescription").html("&lt;u&gt;"+$(".tdItemDescription").text()+"&lt;/u&gt;");
   });
  });
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div&gt;
  &lt;span&gt;Item: &lt;/span&gt;
  &lt;span id="spanItemDescription"&gt;____________________________&lt;/span&gt;
 &lt;/div&gt;
 &lt;table border=1&gt;
  &lt;tr&gt;
   &lt;td class="tdItemDescription"&gt;Shin Guard Small&lt;/td&gt;
   &lt;td&gt;&lt;input type="button" class="btnSelectItem" value="Select"/&gt;&lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
   &lt;td class="tdItemDescription"&gt;Shin Guard Medium&lt;/td&gt;
   &lt;td&gt;&lt;input type="button" class="btnSelectItem" value="Select"/&gt;&lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
   &lt;td class="tdItemDescription"&gt;Shin Guard Large&lt;/td&gt;
   &lt;td&gt;&lt;input type="button" class="btnSelectItem" value="Select"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Please help me. Thanks in advance.</p>
