title: change button color when we click on it in jQuery
body: <p>I seen the multiple thread on stackoverflow related the same title of this post but this different which I am going to ask.
  I am trying to make code in jQuery that suppose my default button color is <code>gray</code> and I wish I click one time It will convert to <code>green</code> and when I click <code>twice</code> on btn or <code>click</code> green btn again it will becomes <code>red</code>.
  overall when I single click on btn it will <code>green</code> and when I click <code>double</code> it will <code>red</code> and when I click <code>third</code> it will default color as <code>grey</code> <strong>OR</strong> when I click <code>green</code> it will <code>red</code> and when click <code>red</code> it will <code>grey</code></p>
  <p>I want to post this btn data when If btn is <code>grey</code> then btn value = 0 same when <code>green</code> == 1 and when <code>red</code> == 3</p>
  <p>I tried to make code but I only know single click function without btn value..
  Please help me to creating this code..</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-js lang-js prettyprint-override"><code>jQuery("#my_styles .btn").click(function() {
    jQuery("#my_styles .btn").removeClass('active');
    jQuery(this).toggleClass('active');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.active{
      background:red;
  }
  button.btn:active{
      background:red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  HTML--
  &lt;div class="col-sm-12" id="my_styles"&gt;
    &lt;button type="submit" class="btn btn-warning" id="1" value="0"&gt;Button1&lt;/button&gt;
    &lt;button type="submit" class="btn btn-warning" id="2" value="0"&gt;Button2&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-12" id="my_styles"&gt;
    &lt;button type="submit" class="btn btn-warning" id="3" value="0"&gt;Button3&lt;/button&gt;
    &lt;button type="submit" class="btn btn-warning" id="4" value="0"&gt;Button4&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>