html - 入力テキストボックスの横に Datepicker アイコンが表示されない

Question

次の JS Fiddle でわかるように、入力ボックスの 1 つの横に小さな Datepicker アイコンしか表示されません。両方の隣に表示する必要があります。

ただし、「id」を「class」に変更しても機能せず、両方のアイコンが消えてしまいます。

http://jsfiddle.net/Vzt39/

HTML:

           <title>jQuery UI Datepicker - Icon trigger</title>

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>


      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

      <script>
      $(function() {
        $( "#datepicker" ).datepicker({
          showOn: "button",
          buttonImage: "calendar.gif",
          buttonImageOnly: true
        });
      });
      </script>



    <p>Date: <input type="text"  id="datepicker" /></p>
     <p>Date: <input type="text" id="datepicker" /></p>


CSS:


  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />


  <link rel="stylesheet" href="/resources/demos/style.css" />