Many buttons, jquery
<p><strong>jQuery</strong>:</p>

<pre><code>$("#direction").click(function() {
    var direction = $(this).text();
    alert(direction);
}
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;button id="direction"&gt;South&lt;/button&gt;
&lt;button id="direction"&gt;North&lt;/button&gt;
</code></pre>

<p>Only the first button alerts the text. I don't understand why. How can I fix this?</p>
