title: JQuery function for multiple button event with same Id
body: <p>I am trying to call a JQuery function to occur fade in event for the buttons with same <code>id</code>, but it seems only first button in the brower can occur the event.</p>
  
  <p>This is JQuery Function to "fade in" for buttons with <code>Id="skip"</code>. Once click the <code>button(Id="next")</code>, other <code>button(Id=skip)</code> is doing fade in.</p>
  
  <pre><code>$(document).ready(function () {
      $('button[id^="next"]').click(function () {
          $("#skip").hide().fadeIn(5000);
      });
  });
  </code></pre>
  
  <p>This is the button <code>id="next"</code></p>
  
  <pre><code> &lt;button id="next" type="submit" value="2" name="submit"&gt;Next&lt;/button&gt;
  </code></pre>
  
  <p>And This is button <code>id="skip"</code></p>
  
  <pre><code>&lt;div id="skip"&gt;
  &lt;form method="post" &gt;
  &lt;input type="hidden" id="skip_ig" name="skip_ig" value=""&gt;&lt;/input&gt;
  &lt;div id="fade"&gt;&lt;button type="submit" value="3" name="submit"&gt;Skip &gt;&gt;&lt;/button&gt;&lt;/div&gt;
  &lt;?php include('includes/aftersubmit.php');
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have multiple buttons of these "next" and "skip". But only first "skip" button does fade-in, others are not. Is Jquery function can only call first button when there are multiple button with same <code>id</code>? Thank you for your help.</p>