Rating button filter : <p><a href="https://i.stack.imgur.com/2edTD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2edTD.jpg" alt="enter image description here"></a></p>

<p>I'm trying to filtering my list from bad to excellent like trivago system</p>

<p><a href="https://www.trivago.com.tr/?cpt=3481203&amp;iRoomType=7&amp;iPathId=34812&amp;aDateRange%5Barr%5D=2017-05-14&amp;aDateRange%5Bdep%5D=2017-05-15&amp;iGeoDistanceItem=0&amp;iViewType=0&amp;bIsSeoPage=false&amp;bIsSitemap=false&amp;" rel="nofollow noreferrer">if you are going to click this link</a>
 you will understand what I'm talking about and I show section on image what I want to do.</p>

<p>When you click button you see styling is removing or adding again and showing hotel list I really didn't understand how to do that ? is there any example</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  outline: none;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 10px;
}

#wrap {
  width: 960px;
}

#wrap:before,
#wrap:after {
  content: "";
  display: table;
  clear: both;
}

#filter {
  width: 40%;
  float: left;
}

#content {
  float: right;
  width: 59%;
  margin-left: 1%;
  font-size: 12px;
  font-family: sans-serif;
}

.filter-list {
  border: 1px solid #ccc;
  margin-bottom: 5px;
  padding: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main id="wrap"&gt;

  &lt;div id="filter"&gt;
    &lt;button class="bad" data-id="1" style="background:#cc0033;color:#fff" name="rating"&gt;bad&lt;/button&gt;
    &lt;button class="normal" data-id="2" style="background:orange;color:#fff" name="rating"&gt;normal&lt;/button&gt;
    &lt;button class="good" data-id="3" style="background:#99cc00;color:#fff" name="rating"&gt;good&lt;/button&gt;
    &lt;button class="verygood" data-id="4" style="background:green;color:#fff" name="rating"&gt;very good&lt;/button&gt;
    &lt;button class="excellent" data-id="5" style="background:darkgreen;color:#fff" name="rating"&gt;excellent&lt;/button&gt;
  &lt;/div&gt;
  &lt;!-- filter--&gt;

  &lt;div id="content"&gt;
    &lt;div class="filter-list"&gt;
      I'm a very good
    &lt;/div&gt;
    &lt;div class="filter-list"&gt;
      this is the bad list
    &lt;/div&gt;
    &lt;div class="filter-list"&gt;
      I'm a very good to
    &lt;/div&gt;
    &lt;div class="filter-list"&gt;
      Excellent!
    &lt;/div&gt;
    &lt;div class="filter-list"&gt;
      Iııh normal!
    &lt;/div&gt;
    &lt;div class="filter-list"&gt;
      Good - enough thanks
    &lt;/div&gt;
    &lt;div class="filter-list"&gt;
      Bad - don't ever..
    &lt;/div&gt;
    &lt;div class="filter-list"&gt;
      Excellent again
    &lt;/div&gt;
    &lt;div class="filter-list"&gt;
      isn't bad ? I think yes bad..
    &lt;/div&gt;
  &lt;/div&gt;


&lt;/main&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>
