title: jQuery change selected item style on different selection
body: <p>I'm working on a project where I need to change the indication style of an item when another item in the same row is selected. I also need to make an overlay visible on all other items excepted the selected item. </p>
  
  <p>Right now I have working code that highlights the selected item, and makes the overlay appear, but my lack of experience is causing me confusion as to how to make this work as mentioned above. Here's the code for reference.</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>$(".prod_link").bind('click', function(){
      $(this).find("img").addClass('glow');
      $(this).parent().parent().find(".after").css("display", "block");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.prod_thumb{height: 100px; width: 100px;}
  .prod_thumb:hover{
   margin: 10px auto;
   height: 95px;
   width: 95px;
   background-color: #cd1041;
   -webkit-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75); 
   -moz-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
   box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out; /* IE10 is actually unprefixed */
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
  }
  .glow {
   margin: 5px auto;
   height: 95px;
   width: 95px;
   background-color: #cd1041;
   -webkit-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75); 
   -moz-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
   box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
  }
  .image-container { position: relative; }
  .image-container .after { position: absolute; top: 5px; width: 95px; height: 95px; display: block; background: rgba(255, 255, 255, .6); }
  .image-container .after:hover{opacity: 0; transition: 0.3s;}</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-sm-2 image-container"&gt;
     &lt;a data-toggle="modal" data-target=".prod_modal" class="prod_link"&gt;
      &lt;img src="img/kitchen/cookware2.jpg" class="img-responsive prod_thumb"/&gt;
       &lt;div class="after" style="display: none;"&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-2 image-container"&gt;
     &lt;a data-toggle="modal" data-target=".prod_modal" class="prod_link"&gt;
       &lt;img src="img/kitchen/cookware3.jpg" class="img-responsive prod_thumb"/&gt;
        &lt;div class="after" style="display: none;"&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-2 image-container"&gt;
      &lt;a data-toggle="modal" data-target=".prod_modal" class="prod_link"&gt;
      &lt;img src="img/kitchen/cookware4.jpg" class="img-responsive prod_thumb"/&gt;
       &lt;div class="after" style="display: none;"&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-2 image-container"&gt;         
     &lt;a data-toggle="modal" data-target=".prod_modal" class="prod_link"&gt;
       &lt;img src="img/kitchen/cookware5.jpg" class="img-responsive prod_thumb"/&gt;
       &lt;div class="after" style="display: none;"&gt;&lt;/div&gt;
     &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help will be greatly appreciated. </p>