title: Set a box-shadow on div when click on it
body: <p>I have 3 divs. I want that when I click on first div then set box-shadow on it and when I click on second div then set box-shadow on it also remove box-shadow on first div.</p>
  
  <p>These are 3 divs</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>$(document).ready(function() {
    $(".boxshadow").on('focus', function() {
      $(this).css({
        "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707"
      });
    });
    $(".boxshadow").on('blur', function() {
      $(this).css({
        "box-shadow": "inset 0 0px 0px #dab6b6, 0 0 0px #da0707"
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="row"&gt;
  
    &lt;div class="col-lg-4 col-md-6 boxShadow"&gt;
      &lt;div class="card card-pricing card-plain"&gt;
        &lt;h6 class="card-category"&gt; Bravo Pack&lt;/h6&gt;
        &lt;div class="card-body"&gt;
          &lt;div class="card-icon icon-warning "&gt;
            &lt;i class="now-ui-icons media-1_button-power"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;h3 class="card-title" style="color: #333;"&gt;10$&lt;/h3&gt;
          &lt;ul&gt;
            &lt;li style="color: #888;"&gt;Complete documentation&lt;/li&gt;
            &lt;li style="color: #888;"&gt;Working materials in Sketch&lt;/li&gt;
          &lt;/ul&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-lg-4 col-md-6 boxShadow"&gt;
      &lt;div class="card card-pricing"&gt;
        &lt;h6 class="card-category"&gt; Alpha Pack&lt;/h6&gt;
        &lt;div class="card-body"&gt;
          &lt;div class="card-icon icon-primary "&gt;
            &lt;i class="now-ui-icons objects_diamond"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;h3 class="card-title"&gt;69$&lt;/h3&gt;
          &lt;ul&gt;
            &lt;li&gt;Working materials in EPS&lt;/li&gt;
            &lt;li&gt;6 months access to the library&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-lg-4 col-md-6 boxShadow"&gt;
      &lt;div class="card card-pricing card-plain"&gt;
        &lt;h6 class="card-category"&gt; Charlie Pack&lt;/h6&gt;
        &lt;div class="card-body"&gt;
          &lt;div class="card-icon icon-success "&gt;
            &lt;i class="now-ui-icons media-2_sound-wave"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;h3 class="card-title" style="color: #333;"&gt;69$&lt;/h3&gt;
          &lt;ul&gt;
            &lt;li style="color: #888;"&gt;Working materials in PSD&lt;/li&gt;
            &lt;li style="color: #888;"&gt;1 year access to the library&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am giving the same class name on all 3 divs.Issue is that when I click on div then is not focus.</p>