title: css only appends to the first panel
body: <p>I have wrote a jQuery to change the button colour to red when some one clicks on it. But that is only work with the first panel but its not working for the rest of the panels. In the first set of button it works but not only for everything. This is the jQuery part.</p>
  
  <pre><code>function DurationOnClick(element){
      var buttonId = element.id;
      var buttonName = element.name;
      var buttonIds = ["1Hour", "30Min", "1Day" , "1Week", "1Month"];
      var chartType = $('#chartType').val();
      var idValue = $('#IdValue').val();        
  
      //after user click the option here we are changing the option black to red.
      $(buttonIds).each(function(i, e) {
  
        $('#'+e+'[name='+buttonName+']').css("color", "");      
      });
  
      $('#'+buttonId+'[name='+buttonName+']').css("color", "Blue");         `
  </code></pre>
  
  <p>The html code is like this :</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title" style="color:Black"&gt;Memory Consumption Average&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;button class="btn btn-default btn-xs" name="MemoryConsumption" id="30Min" onclick="return DurationOnClick(this)"&gt;30 mins&lt;/button&gt;
                  &lt;button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)"&gt;1 hour&lt;/button&gt;
                  &lt;button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Day" onclick="return DurationOnClick(this)"&gt;1 day&lt;/button&gt;
                  &lt;button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Week" onclick="return DurationOnClick(this)"&gt;1 week&lt;/button&gt;
                  &lt;button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Month" onclick="return DurationOnClick(this)"&gt;1 month&lt;/button&gt;
                  &lt;div class="container content" style="width: 600px;"&gt;
                      &lt;div class="row text-center" id="chart3"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-6"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title" style="color:Black"&gt;Load Average&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;button class="btn btn-default btn-xs" name="LoadAverage" id="30Min" onclick="return DurationOnClick(this)"&gt;30 mins&lt;/button&gt;
                  &lt;button class="btn btn-default btn-xs" name="LoadAverage" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)"&gt;1 hour&lt;/button&gt;
                  &lt;button class="btn btn-default btn-xs" name="LoadAverage" id="1Day" onclick="return DurationOnClick(this)"&gt;1 day&lt;/button&gt;
                  &lt;button class="btn btn-default btn-xs" name="LoadAverage" id="1Week" onclick="return DurationOnClick(this)"&gt;1 week&lt;/button&gt;
                  &lt;button class="btn btn-default btn-xs" name="LoadAverage" id="1Month" onclick="return DurationOnClick(this)"&gt;1 month&lt;/button&gt;
                  &lt;div class="container content" style="width: 600px;"&gt;                        
                      &lt;div class="row text-center" id="chart2"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After removing the first panel the colour changing will happen for the next immediate chart but the charts below that one the changing colour is not happening. Any help to figure out the issue will be really appreciated. </p>