title: How to highlight only a selected <div> with back ground color using jquery?
body: <p>I am posting code which I have tried in jQuery maybe a basic one but as I was new to this hope you understand and help me. I want the only selected region should be with color and rest of previously clicked and non selected regions should be non colored... </p>
  
  <p>In this code I could able to apply a required color to every tag...
  but how to accomplish the required task..</p>
  
  <p>hope for your Help... Thanks in advance</p>
  
  <pre><code>&lt;script type="text/javascript" src="scripts/jquery-latest.min.js" &gt; &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $(".cell1").click(function () {
              $(this).css("background-color", "red");
          });
      });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
      .table
      {
          display: table;
          width:700px;
          border: 1px solid #aaa; 
      }  
  
       .row
      {
  
          display: table-row;
          height:100px;
          border: 1px solid #aaa;                   
  
      }
       .cell
      {
          display: table-cell;
          width:100px;
          font-size:larger;
          text-align:center;
      }
  
      .cell1
      {
          display :table-cell;
          width:100px;
          font-size:small;
          border: 1px solid #aaa;
      }
  
      .cell2
      {
          display:table-cell;
          height:90px;
          width:100px;
  
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>
      </p>
  
  <pre><code>&lt;div class="table"&gt;
  &lt;div class="row"&gt;
  &lt;div class="cell"&gt;
  Sun
  &lt;/div&gt;
  
   &lt;div class="cell"&gt;
  Mon
  &lt;/div&gt;
  
   &lt;div class="cell"&gt;
  Tue
  &lt;/div&gt;
  
   &lt;div class="cell"&gt;
  Wed
  &lt;/div&gt;
  
   &lt;div class="cell"&gt;
  Thu
  &lt;/div&gt;
  
   &lt;div class="cell"&gt;
  Fri
  &lt;/div&gt;
  
   &lt;div class="cell"&gt;
  Sat
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="row"&gt;
  &lt;div  id="num1" class="cell1"  &gt;
  27
  
  
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num2"&gt;
  28
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num3"&gt;
  29
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num4" &gt;
  30
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num5"&gt;
  1
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num6"&gt;
  2
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num7"&gt;
  3
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="cell1" id="num8"&gt;
  4
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num9"&gt;
  5
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num10"&gt;
  6
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num11"&gt;
  7
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num12"&gt;
  8
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num13"&gt;
  9
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num14"&gt;
  10
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="cell1" id="num15"&gt;
  11
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num16"&gt;
  12
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num17"&gt;
  13
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num18"&gt;
  14
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num19"&gt;
  15
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num20"&gt;
  16
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num21"&gt;
  17
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="cell1" id="num22"&gt;
  18
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num23"&gt;
  19
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num24"&gt;
  20
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num25"&gt;
  21
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num26"&gt;
  22
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num27"&gt;
  23
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num28"&gt;
  24
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="cell1" id="num29"&gt;
  25
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num30"&gt;
  26
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num31"&gt;
  27
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num32"&gt;
  28
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num33"&gt;
  29
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num34"&gt;
  30
  &lt;/div&gt;
  
   &lt;div class="cell1" id="num35"&gt;
  31
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>