title: bootstrap div collapse and expand
body: <p>I want to expand and collapse div elements with same id seperately when i click different buttons.</p>
  
  <p>here is my HTML code</p>
  
  <pre><code>&lt;body&gt;
      &lt;button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem"&gt;
          &lt;span class="glyphicon glyphicon-collapse-down"&gt;&lt;/span&gt; Show Status
      &lt;/button&gt;
      &lt;div class="collapse" id="dem"&gt;
          &lt;p&gt;This is first&lt;/p&gt;
      &lt;/div&gt;
      &lt;button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem"&gt;
          &lt;span class="glyphicon glyphicon-collapse-down"&gt;&lt;/span&gt; Show Status
      &lt;/button&gt;
      &lt;div class="collapse" id="dem"&gt;
          &lt;p&gt;This is Second&lt;/p&gt;
      &lt;/div&gt;
      &lt;button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem"&gt;
          &lt;span class="glyphicon glyphicon-collapse-down"&gt;&lt;/span&gt; Show Status
      &lt;/button&gt;
      &lt;div class="collapse" id="dem"&gt;
          &lt;p&gt;This is Third&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is my script</p>
  
  <pre><code>$(function(){
  
      $('#dem').on('show.bs.collapse', function () {
          $('#button').html('&lt;span class="glyphicon glyphicon-collapse-up"&gt;&lt;/span&gt; Hide Status');
      })
      $('#dem').on('hide.bs.collapse', function () {
          $('#button').html('&lt;span class="glyphicon glyphicon-collapse-down"&gt;&lt;/span&gt; Show Status');
      })
  })
  </code></pre>
  
  <p>When I click the first button it expands and when I click second or third button the content of first button collapses.The content is not expanding for other buttons.I know I am missing some script code but i don't know what the code is.</p>