javascript - フォームボタンイベントが発生しない

Question

ドキュメント全体、リンク、ボタン、テキストフィールドのクリックを処理するためのこの jQuery イベント コードがあります。

        <script>

            $(document).ready(function() {
                //whole document
                $('html').dblclick(function() {
                    alert('ouch!');
                });

                //any link
                $('a').mouseover(function(){
                    var message = "<p>You pointed a link!</p>";
                    $('.main').append(message);
                });

                //only one button ?                 
                $('#button').click(function(){
                    $(this).val("Stop it!");
                });

                //text field, I suppose it would have the same problem
                //as button                 
                $('#textfield').focus(function() {
                    $(this).css('background-color', '#F59898');
                }); 
            });

        </script>

およびこの HTML フォーム コード:

        <form action="#" method="get">
            <fieldset>
                <legend>A Form</legend>

                <p>
                  <input name="button" type="button" id="button" value="A Button" />
                </p>

                <p>
                    <input name="textfield" type="text" id="textfield" />
                </p>

                <p>
                  <input type="button" id="button" value="Doesn't work"/>
                </p>

            </fieldset>
        </form>

ユーザーがボタンをクリックして値が変わる部分がわかりません。単一のボタンの場合は正常に機能しますが、同じ ID (#button) で 2 番目を追加すると、最初のボタンに対してのみ機能します。そのIDを割り当てたボタンでこれが実行されることを期待していました。私は自分自身を明確にしたことを願っています。