Change Div background color several times (loop) on click

Question

Hello Stacokoverflowers!

I have a div wrapper with 52 boxes inside and a large box with a letter. the smallest ones surrounding the large letter, I've done this with css grid, right now if I hover on those small ones it turns light grey.

What I'm trying to achieve

On click (any of the small 52 boxes) the background should turn green first, if I click again on top of the same box it should turn red. while being red or green the hover state (grey) should be disabled. If you click a 3rd time, the background should go back to white. and the grey hover option should be enabled again.

I also have a data property on each box, that states as "defaultWhite" that I would like to change to red or green or back to defaultWhite while clicking that box. So on the bg data is updated with the background color. |

Since I'm planning to export this data to an excel doc later on.

const changeColor = document.getElementById('changeColor'),
  colors = ['green', 'red', 'white'];
let colorIndex = 0;

changeColor.addEventListener('click', () => {
  document.this.style.backgroundColor = colors[colorIndex];
  colorIndex = (colorIndex + 1) % colors.length
});

html {
  -webkit-font-smoothing: antialiased;
}

body {
  background: #fff;
  margin: 0 auto;
  padding: 1em;
}

.generalWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: ;
  position:
}

.boxes-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1280px;
  background-color: ;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "Title Title Title Title Title Title Title Title Title Title Title Title Title Title" "sheW1 sheW2 sheW3 sheW4 sheW5 sheW6 sheW7 sheW8 sheW9 sheW10 sheW11 sheW12 sheW13 sheW14" "sheW52 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW15" "sheW51 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW16" "sheW50 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW17" "sheW49 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW18" "sheW48 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW19" "sheW47 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW20" "sheW46 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW21" "sheW45 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW22" "sheW44 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW23" "sheW43 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW24" "sheW42 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW25" "sheW41 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW26" "sheW40 sheW39 sheW38 sheW37 sheW36 sheW35 sheW34 sheW33 sheW32 sheW31 sheW30 sheW29 sheW28 sheW27";
  width: 300px;
  height: 320px;
  font-family: sans-serif, helvetica;
  background-color: white;
  background-color: ;
}

.Title {
  grid-area: Title;
  text-align: center;
  background-color: darkslateblue;
  color: white;
  font-size: 1em;
  padding: 5px 0px;
  font-weight: 600;
}

.sheW1 {
  grid-area: sheW1;
  text-align: center;
}

.sheW2 {
  grid-area: sheW2;
  text-align: center;
}

.sheW3 {
  grid-area: sheW3;
  text-align: center;
}

.sheW4 {
  grid-area: sheW4;
  text-align: center;
}

.sheW5 {
  grid-area: sheW5;
  text-align: center;
}

.sheW6 {
  grid-area: sheW6;
  text-align: center;
}

.sheW7 {
  grid-area: sheW7;
  text-align: center;
}

.sheW8 {
  grid-area: sheW8;
  text-align: center;
}

.sheW9 {
  grid-area: sheW9;
  text-align: center;
}

.sheW10 {
  grid-area: sheW10;
  text-align: center;
}

.sheW11 {
  grid-area: sheW11;
  text-align: center;
}

.sheW12 {
  grid-area: sheW12;
  text-align: center;
}

.sheW13 {
  grid-area: sheW13;
  text-align: center;
}

.sheW14 {
  grid-area: sheW14;
  text-align: center;
}

.sheW15 {
  grid-area: sheW15;
  border: 1px solid black;
  text-align: center;
}

.sheW16 {
  grid-area: sheW16;
  border: 1px solid black;
  text-align: center;
}

.sheW17 {
  grid-area: sheW17;
  text-align: center;
}

.sheW18 {
  grid-area: sheW18;
  text-align: center;
}

.sheW19 {
  grid-area: sheW19;
  text-align: center;
}

.sheW20 {
  grid-area: sheW20;
  text-align: center;
}

.sheW21 {
  grid-area: sheW21;
  border: 1px solid black;
  text-align: center;
}

.sheW22 {
  grid-area: sheW22;
  text-align: center;
}

.sheW23 {
  grid-area: sheW23;
  text-align: center;
}

.sheW24 {
  grid-area: sheW24;
  text-align: center;
}

.sheW25 {
  grid-area: sheW25;
  border: 1px solid black;
  text-align: center;
}

.sheW26 {
  grid-area: sheW26;
  text-align: center;
}

.sheW27 {
  grid-area: sheW27;
  text-align: center;
}

.sheW28 {
  grid-area: sheW28;
  text-align: center;
}

.sheW29 {
  grid-area: sheW29;
  text-align: center;
}

.sheW30 {
  grid-area: sheW30;
  border: 1px solid black;
  text-align: center;
}

.sheW31 {
  grid-area: sheW31;
  text-align: center;
}

.sheW32 {
  grid-area: sheW32;
  text-align: center;
}

.sheW33 {
  grid-area: sheW33;
  text-align: center;
}

.sheW34 {
  grid-area: sheW34;
  text-align: center;
}

.sheW35 {
  grid-area: sheW35;
  text-align: center;
}

.sheW36 {
  grid-area: sheW36;
  text-align: center;
}

.sheW37 {
  grid-area: sheW37;
  text-align: center;
}

.sheW38 {
  grid-area: sheW38;
  text-align: center;
}

.sheW39 {
  grid-area: sheW39;
  text-align: center;
}

.sheW40 {
  grid-area: sheW40;
  text-align: center;
}

.sheW41 {
  grid-area: sheW41;
  text-align: center;
}

.sheW42 {
  grid-area: sheW42;
  text-align: center;
}

.sheW43 {
  grid-area: sheW43;
  text-align: center;
}

.sheW44 {
  grid-area: sheW44;
  text-align: center;
}

.sheW45 {
  grid-area: sheW45;
  text-align: center;
}

.sheW46 {
  grid-area: sheW46;
  text-align: center;
}

.sheW47 {
  grid-area: sheW47;
  text-align: center;
}

.sheW48 {
  grid-area: sheW48;
  border: 1px solid black;
  text-align: center;
}

.sheW49 {
  grid-area: sheW49;
  text-align: center;
}

.sheW50 {
  grid-area: sheW50;
  text-align: center;
}

.sheW51 {
  grid-area: sheW51;
  text-align: center;
}

.sheW52 {
  grid-area: sheW52;
  text-align: center;
}

.Letter {
  grid-area: Letter;
  border: 1px solid darkgrey;
  text-align: center;
}

.letterCenter {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 130px;
}

#changeColor {
  border: 1px solid darkgrey;
  font-size: 11px;
  display: flex;
  position: relative;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: darkgrey;
  font-weight: bold;
}

#changeColor:hover {
  cursor: pointer;
  background-color: darkgrey;
  color: white;
}

@media all and (-ms-high-contrast:none) {
  .grid-container {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  .Title {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 14;
  }
  .sheW1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW2 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .sheW3 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
  .sheW4 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }
  .sheW5 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }
  .sheW6 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }
  .sheW7 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }
  .sheW8 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }
  .sheW9 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }
  .sheW10 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }
  .sheW11 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }
  .sheW12 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }
  .sheW13 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }
  .sheW14 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW15 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW16 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW17 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW18 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW19 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW20 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW21 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW22 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW23 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW24 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW25 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW26 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW27 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW28 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }
  .sheW29 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }
  .sheW30 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }
  .sheW31 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }
  .sheW32 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }
  .sheW33 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }
  .sheW34 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }
  .sheW35 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }
  .sheW36 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }
  .sheW37 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }
  .sheW38 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
  .sheW39 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .sheW40 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW41 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW42 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW43 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW44 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW45 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW46 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW47 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW48 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW49 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW50 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW51 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW52 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .Letter {
    -ms-grid-row: 3;
    -ms-grid-row-span: 12;
    -ms-grid-column: 2;
    -ms-grid-column-span: 12;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>S test</title>
  <meta name="description" content="S test">
  <link rel="stylesheet" href="styles/main.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
</head>

<body>
  <div class="generalWrapper">
    <div class="boxes-container">
      <div class="grid-container">
        <div class="Title">SHE</div>
        <div id="changeColor" class="sheW1" data="defaultWhite">1</div>
        <div id="changeColor" class="sheW2" data="defaultWhite">2</div>
        <div id="changeColor" class="sheW3" data="defaultWhite">3</div>
        <div id="changeColor" class="sheW4" data="defaultWhite">4</div>
        <div id="changeColor" class="sheW5" data="defaultWhite">5</div>
        <div id="changeColor" class="sheW6" data="defaultWhite">6</div>
        <div id="changeColor" class="sheW7" data="defaultWhite">7</div>
        <div id="changeColor" class="sheW8" data="defaultWhite">8</div>
        <div id="changeColor" class="sheW9" data="defaultWhite">9</div>
        <div id="changeColor" class="sheW10" data="defaultWhite">10</div>
        <div id="changeColor" class="sheW11" data="defaultWhite">11</div>
        <div id="changeColor" class="sheW12" data="defaultWhite">12</div>
        <div id="changeColor" class="sheW13" data="defaultWhite">13</div>
        <div id="changeColor" class="sheW14" data="defaultWhite">14</div>
        <div id="changeColor" class="sheW15" data="defaultWhite">15</div>
        <div id="changeColor" class="sheW16" data="defaultWhite">16</div>
        <div id="changeColor" class="sheW17" data="defaultWhite">17</div>
        <div id="changeColor" class="sheW18" data="defaultWhite">18</div>
        <div id="changeColor" class="sheW19" data="defaultWhite">19</div>
        <div id="changeColor" class="sheW20" data="defaultWhite">20</div>
        <div id="changeColor" class="sheW21" data="defaultWhite">21</div>
        <div id="changeColor" class="sheW22" data="defaultWhite">22</div>
        <div id="changeColor" class="sheW23" data="defaultWhite">23</div>
        <div id="changeColor" class="sheW24" data="defaultWhite">24</div>
        <div id="changeColor" class="sheW25" data="defaultWhite">25</div>
        <div id="changeColor" class="sheW26" data="defaultWhite">26</div>
        <div id="changeColor" class="sheW27" data="defaultWhite">27</div>
        <div id="changeColor" class="sheW28" data="defaultWhite">28</div>
        <div id="changeColor" class="sheW29" data="defaultWhite">29</div>
        <div id="changeColor" class="sheW30" data="defaultWhite">30</div>
        <div id="changeColor" class="sheW31" data="defaultWhite">31</div>
        <div id="changeColor" class="sheW32" data="defaultWhite">32</div>
        <div id="changeColor" class="sheW33" data="defaultWhite">33</div>
        <div id="changeColor" class="sheW34" data="defaultWhite">34</div>
        <div id="changeColor" class="sheW35" data="defaultWhite">35</div>
        <div id="changeColor" class="sheW36" data="defaultWhite">36</div>
        <div id="changeColor" class="sheW37" data="defaultWhite">37</div>
        <div id="changeColor" class="sheW38" data="defaultWhite">38</div>
        <div id="changeColor" class="sheW39" data="defaultWhite">39</div>
        <div id="changeColor" class="sheW40" data="defaultWhite">40</div>
        <div id="changeColor" class="sheW41" data="defaultWhite">41</div>
        <div id="changeColor" class="sheW42" data="defaultWhite">42</div>
        <div id="changeColor" class="sheW43" data="defaultWhite">43</div>
        <div id="changeColor" class="sheW44" data="defaultWhite">44</div>
        <div id="changeColor" class="sheW45" data="defaultWhite">45</div>
        <div id="changeColor" class="sheW46" data="defaultWhite">46</div>
        <div id="changeColor" class="sheW47" data="defaultWhite">47</div>
        <div id="changeColor" class="sheW48" data="defaultWhite">48</div>
        <div id="changeColor" class="sheW48" data="defaultWhite">48</div>
        <div id="changeColor" class="sheW48" data="defaultWhite">48</div>
        <div id="changeColor" class="sheW49" data="defaultWhite">49</div>
        <div id="changeColor" class="sheW50" data="defaultWhite">50</div>
        <div id="changeColor" class="sheW51" data="defaultWhite">51</div>
        <div id="changeColor" class="sheW52" data="defaultWhite">52</div>
        <div class="Letter">
          <div class="letterCenter">S</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Link to JsFiddle

Anyone could help me to achieve the color change in loop and the data update while clicking? :)

Answer 1

There's a problem with js, and also documnet.getElementbyID will alays returns one record, hence never bind click to all the elements. Please try below:

HTML:

var changeColor = $('.changeColor');
colors      = ['green', 'red', 'white'];
let   colorIndex  = 0;

changeColor.click((event) => {
$(event.toElement).css('background-color',colors[colorIndex])     
colorIndex = (colorIndex + 1) % colors.length
}); 

html {
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fff;
    margin: 0 auto;
    padding: 1em;
}

.generalWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: ;
    position:
}

.boxes-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1280px;
    background-color: ;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "Title Title Title Title Title Title Title Title Title Title Title Title Title Title" "sheW1 sheW2 sheW3 sheW4 sheW5 sheW6 sheW7 sheW8 sheW9 sheW10 sheW11 sheW12 sheW13 sheW14" "sheW52 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW15" "sheW51 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW16" "sheW50 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW17" "sheW49 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW18" "sheW48 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW19" "sheW47 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW20" "sheW46 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW21" "sheW45 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW22" "sheW44 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW23" "sheW43 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW24" "sheW42 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW25" "sheW41 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW26" "sheW40 sheW39 sheW38 sheW37 sheW36 sheW35 sheW34 sheW33 sheW32 sheW31 sheW30 sheW29 sheW28 sheW27";
    width: 300px;
    height: 320px;
    font-family: sans-serif, helvetica;
    background-color: white;
    background-color: ;
}

.Title {
    grid-area: Title;
    text-align: center;
    background-color:darkslateblue;
    color: white;
    font-size: 1em;
    padding: 5px 0px;
    font-weight: 600;
}

.sheW1 { grid-area: sheW1;
text-align: center;
}

.sheW2 { grid-area: sheW2;
text-align: center;
}

.sheW3 { grid-area: sheW3;
text-align: center;
}

.sheW4 { grid-area: sheW4;
text-align: center;
}

.sheW5 { grid-area: sheW5;
text-align: center;
}

.sheW6 { grid-area: sheW6;
text-align: center;
}

.sheW7 { grid-area: sheW7;
text-align: center;
}

.sheW8 { grid-area: sheW8;
text-align: center;
}

.sheW9 { grid-area: sheW9;
text-align: center;
}

.sheW10 { grid-area: sheW10;
text-align: center;
}

.sheW11 { grid-area: sheW11;
text-align: center;
}

.sheW12 { grid-area: sheW12;
text-align: center;
}

.sheW13 { grid-area: sheW13;
text-align: center;
}

.sheW14 { grid-area: sheW14;
text-align: center;
}

.sheW15 { grid-area: sheW15;
border: 1px solid black;
text-align: center;
}

.sheW16 { grid-area: sheW16;
border: 1px solid black;
text-align: center;
}

.sheW17 { grid-area: sheW17;
text-align: center;
}

.sheW18 { grid-area: sheW18;
text-align: center;
}

.sheW19 { grid-area: sheW19;
text-align: center;
}

.sheW20 { grid-area: sheW20;
text-align: center;
}

.sheW21 { grid-area: sheW21;
border: 1px solid black;
text-align: center;}

.sheW22 { grid-area: sheW22;
text-align: center;
}

.sheW23 { grid-area: sheW23;
text-align: center;
}

.sheW24 { grid-area: sheW24;
text-align: center;
}

.sheW25 { grid-area: sheW25;
border: 1px solid black;
text-align: center;}

.sheW26 { grid-area: sheW26;
text-align: center;
}

.sheW27 { grid-area: sheW27;
text-align: center;
}

.sheW28 { grid-area: sheW28;
text-align: center;
}

.sheW29 { grid-area: sheW29;
text-align: center;
}

.sheW30 { grid-area: sheW30;
border: 1px solid black;
text-align: center;
}

.sheW31 { grid-area: sheW31;
text-align: center;
}

.sheW32 { grid-area: sheW32;
text-align: center;
}

.sheW33 { grid-area: sheW33;
text-align: center;
}

.sheW34 { grid-area: sheW34;
text-align: center;
}

.sheW35 { grid-area: sheW35;
text-align: center;
}

.sheW36 { grid-area: sheW36;
text-align: center;
}

.sheW37 { grid-area: sheW37;
text-align: center;
}

.sheW38 { grid-area: sheW38;
text-align: center;
}

.sheW39 { grid-area: sheW39;
text-align: center;
}

.sheW40 { grid-area: sheW40;
text-align: center;
}

.sheW41 { grid-area: sheW41;
text-align: center;
}

.sheW42 { grid-area: sheW42;
text-align: center;
}

.sheW43 { grid-area: sheW43;
text-align: center;
}

.sheW44 { grid-area: sheW44;
text-align: center;
}

.sheW45 { grid-area: sheW45;
text-align: center;
}

.sheW46 { grid-area: sheW46;
text-align: center;
}

.sheW47 { grid-area: sheW47;
text-align: center;
}

.sheW48 { grid-area: sheW48;
border: 1px solid black;
text-align: center;
}

.sheW49 { grid-area: sheW49;
text-align: center;
}

.sheW50 { grid-area: sheW50;
text-align: center;
}

.sheW51 { grid-area: sheW51;
text-align: center;
}

.sheW52 { grid-area: sheW52;
text-align: center;
}

.Letter { grid-area: Letter;
border: 1px solid darkgrey;
text-align: center;}

.letterCenter {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 130px;
}

.changeColor {
    border: 1px solid darkgrey;
    font-size: 11px;
    display: flex;
    position: relative;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: darkgrey;
    font-weight: bold;
}

.changeColor:hover {
    cursor: pointer;
    background-color:darkgrey;
    color: white;
}

@media all and (-ms-high-contrast:none) {
  .grid-container {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .Title {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 14;
  }

  .sheW1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW2 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }

  .sheW3 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }

  .sheW4 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }

  .sheW5 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }

  .sheW6 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }

  .sheW7 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }

  .sheW8 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }

  .sheW9 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }

  .sheW10 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }

  .sheW11 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }

  .sheW12 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }

  .sheW13 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }

  .sheW14 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW15 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW16 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW17 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW18 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW19 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW20 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW21 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW22 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW23 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW24 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW25 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW26 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW27 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  .sheW28 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }

  .sheW29 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }

  .sheW30 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }

  .sheW31 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }

  .sheW32 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }

  .sheW33 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }

  .sheW34 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }

  .sheW35 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }

  .sheW36 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }

  .sheW37 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }

  .sheW38 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }

  .sheW39 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }

  .sheW40 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW41 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW42 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW43 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW44 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW45 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW46 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW47 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW48 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW49 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW50 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW51 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .sheW52 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .Letter {
    -ms-grid-row: 3;
    -ms-grid-row-span: 12;
    -ms-grid-column: 2;
    -ms-grid-column-span: 12;
  }

}

<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>S test</title>
        <meta name="description" content="S test">
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
    </head>
    <body>
    <div class="generalWrapper">  
      <div class="boxes-container">  
        <div class="grid-container">
          <div class="Title">SHE</div>
          <div   class="changeColor sheW1" data="defaultWhite">1</div>
          <div   class="changeColor sheW2" data="defaultWhite">2</div>
          <div   class="changeColor sheW3" data="defaultWhite">3</div>
          <div   class="changeColor sheW4" data="defaultWhite">4</div>
          <div   class="changeColor sheW5" data="defaultWhite">5</div>
          <div   class="changeColor sheW6" data="defaultWhite">6</div>
          <div   class="changeColor sheW7" data="defaultWhite">7</div>
          <div   class="changeColor sheW8" data="defaultWhite">8</div>
          <div   class="changeColor sheW9" data="defaultWhite">9</div>
          <div   class="changeColor sheW10" data="defaultWhite">10</div>
          <div   class="changeColor sheW11" data="defaultWhite">11</div>
          <div   class="changeColor sheW12" data="defaultWhite">12</div>
          <div   class="changeColor sheW13" data="defaultWhite">13</div>
          <div   class="changeColor sheW14" data="defaultWhite">14</div>
          <div   class="changeColor sheW15" data="defaultWhite">15</div>
          <div   class="changeColor sheW16" data="defaultWhite">16</div>
          <div   class="changeColor sheW17" data="defaultWhite">17</div>
          <div   class="changeColor sheW18" data="defaultWhite">18</div>
          <div   class="changeColor sheW19" data="defaultWhite">19</div>
          <div   class="changeColor sheW20" data="defaultWhite">20</div>
          <div   class="changeColor sheW21" data="defaultWhite">21</div>
          <div   class="changeColor sheW22" data="defaultWhite">22</div>
          <div   class="changeColor sheW23" data="defaultWhite">23</div>
          <div   class="changeColor sheW24" data="defaultWhite">24</div>
          <div   class="changeColor sheW25" data="defaultWhite">25</div>
          <div   class="changeColor sheW26" data="defaultWhite">26</div>
          <div   class="changeColor sheW27" data="defaultWhite">27</div>
          <div   class="changeColor sheW28" data="defaultWhite">28</div>
          <div   class="changeColor sheW29" data="defaultWhite">29</div>
          <div   class="changeColor sheW30" data="defaultWhite">30</div>
          <div   class="changeColor sheW31" data="defaultWhite">31</div>
          <div   class="changeColor sheW32" data="defaultWhite">32</div>
          <div   class="changeColor sheW33" data="defaultWhite">33</div>
          <div   class="changeColor sheW34" data="defaultWhite">34</div>
          <div   class="changeColor sheW35" data="defaultWhite">35</div>
          <div   class="changeColor sheW36" data="defaultWhite">36</div>
          <div   class="changeColor sheW37" data="defaultWhite">37</div>
          <div   class="changeColor sheW38" data="defaultWhite">38</div>
          <div   class="changeColor sheW39" data="defaultWhite">39</div>
          <div   class="changeColor sheW40" data="defaultWhite">40</div>
          <div   class="changeColor sheW41" data="defaultWhite">41</div>
          <div   class="changeColor sheW42" data="defaultWhite">42</div>
          <div   class="changeColor sheW43" data="defaultWhite">43</div>
          <div   class="changeColor sheW44" data="defaultWhite">44</div>
          <div   class="changeColor sheW45" data="defaultWhite">45</div>
          <div   class="changeColor sheW46" data="defaultWhite">46</div>
          <div   class="changeColor sheW47" data="defaultWhite">47</div>
          <div   class="changeColor sheW48" data="defaultWhite">48</div>
          <div   class="changeColor sheW48" data="defaultWhite">48</div>
          <div   class="changeColor sheW48" data="defaultWhite">48</div>
          <div   class="changeColor sheW49" data="defaultWhite">49</div>
          <div   class="changeColor sheW50" data="defaultWhite">50</div>
          <div   class="changeColor sheW51" data="defaultWhite">51</div>
          <div   class="changeColor sheW52" data="defaultWhite">52</div>
          <div class="Letter">
            <div class="letterCenter">S</div>
          </div>
        </div>
      </div> 
    </div>
    </body>
	<script type="text/javascript" src="a.js"></script>
</html>

Answer 2

There must not be multiple elements in a document that have the same id value.

Using 'starts with' selector on individual class names should solve the problem. Using which you can select all the elements having class beginning with "^she".

While applying a style to the clicked element, $(this) selector could be used to target the element on which click is invoked.

A map like an object could be used to store the current state of the clicked element. A unique key could be "class" as it is different for every element.

const changeColor = document.getElementById('changeColor'),
  colors = ['green', 'red', 'white'];
let colorIndex = 0;
let map = {};
$('[class^="she"]').on('click', function() {
  let classN = $(this).attr('class');
  map[classN] = map[classN] || 0;
  colorIndex = (map[classN]) % colors.length;
  $(this).css("backgroundColor", colors[colorIndex]);
  ++map[classN];
});

html {
  -webkit-font-smoothing: antialiased;
}

body {
  background: #fff;
  margin: 0 auto;
  padding: 1em;
}

.generalWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: ;
  position:
}

.boxes-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1280px;
  background-color: ;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "Title Title Title Title Title Title Title Title Title Title Title Title Title Title" "sheW1 sheW2 sheW3 sheW4 sheW5 sheW6 sheW7 sheW8 sheW9 sheW10 sheW11 sheW12 sheW13 sheW14" "sheW52 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW15" "sheW51 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW16" "sheW50 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW17" "sheW49 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW18" "sheW48 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW19" "sheW47 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW20" "sheW46 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW21" "sheW45 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW22" "sheW44 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW23" "sheW43 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW24" "sheW42 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW25" "sheW41 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW26" "sheW40 sheW39 sheW38 sheW37 sheW36 sheW35 sheW34 sheW33 sheW32 sheW31 sheW30 sheW29 sheW28 sheW27";
  width: 300px;
  height: 320px;
  font-family: sans-serif, helvetica;
  background-color: white;
  background-color: ;
}

.Title {
  grid-area: Title;
  text-align: center;
  background-color: darkslateblue;
  color: white;
  font-size: 1em;
  padding: 5px 0px;
  font-weight: 600;
}

.sheW1 {
  grid-area: sheW1;
  text-align: center;
}

.sheW2 {
  grid-area: sheW2;
  text-align: center;
}

.sheW3 {
  grid-area: sheW3;
  text-align: center;
}

.sheW4 {
  grid-area: sheW4;
  text-align: center;
}

.sheW5 {
  grid-area: sheW5;
  text-align: center;
}

.sheW6 {
  grid-area: sheW6;
  text-align: center;
}

.sheW7 {
  grid-area: sheW7;
  text-align: center;
}

.sheW8 {
  grid-area: sheW8;
  text-align: center;
}

.sheW9 {
  grid-area: sheW9;
  text-align: center;
}

.sheW10 {
  grid-area: sheW10;
  text-align: center;
}

.sheW11 {
  grid-area: sheW11;
  text-align: center;
}

.sheW12 {
  grid-area: sheW12;
  text-align: center;
}

.sheW13 {
  grid-area: sheW13;
  text-align: center;
}

.sheW14 {
  grid-area: sheW14;
  text-align: center;
}

.sheW15 {
  grid-area: sheW15;
  border: 1px solid black;
  text-align: center;
}

.sheW16 {
  grid-area: sheW16;
  border: 1px solid black;
  text-align: center;
}

.sheW17 {
  grid-area: sheW17;
  text-align: center;
}

.sheW18 {
  grid-area: sheW18;
  text-align: center;
}

.sheW19 {
  grid-area: sheW19;
  text-align: center;
}

.sheW20 {
  grid-area: sheW20;
  text-align: center;
}

.sheW21 {
  grid-area: sheW21;
  border: 1px solid black;
  text-align: center;
}

.sheW22 {
  grid-area: sheW22;
  text-align: center;
}

.sheW23 {
  grid-area: sheW23;
  text-align: center;
}

.sheW24 {
  grid-area: sheW24;
  text-align: center;
}

.sheW25 {
  grid-area: sheW25;
  border: 1px solid black;
  text-align: center;
}

.sheW26 {
  grid-area: sheW26;
  text-align: center;
}

.sheW27 {
  grid-area: sheW27;
  text-align: center;
}

.sheW28 {
  grid-area: sheW28;
  text-align: center;
}

.sheW29 {
  grid-area: sheW29;
  text-align: center;
}

.sheW30 {
  grid-area: sheW30;
  border: 1px solid black;
  text-align: center;
}

.sheW31 {
  grid-area: sheW31;
  text-align: center;
}

.sheW32 {
  grid-area: sheW32;
  text-align: center;
}

.sheW33 {
  grid-area: sheW33;
  text-align: center;
}

.sheW34 {
  grid-area: sheW34;
  text-align: center;
}

.sheW35 {
  grid-area: sheW35;
  text-align: center;
}

.sheW36 {
  grid-area: sheW36;
  text-align: center;
}

.sheW37 {
  grid-area: sheW37;
  text-align: center;
}

.sheW38 {
  grid-area: sheW38;
  text-align: center;
}

.sheW39 {
  grid-area: sheW39;
  text-align: center;
}

.sheW40 {
  grid-area: sheW40;
  text-align: center;
}

.sheW41 {
  grid-area: sheW41;
  text-align: center;
}

.sheW42 {
  grid-area: sheW42;
  text-align: center;
}

.sheW43 {
  grid-area: sheW43;
  text-align: center;
}

.sheW44 {
  grid-area: sheW44;
  text-align: center;
}

.sheW45 {
  grid-area: sheW45;
  text-align: center;
}

.sheW46 {
  grid-area: sheW46;
  text-align: center;
}

.sheW47 {
  grid-area: sheW47;
  text-align: center;
}

.sheW48 {
  grid-area: sheW48;
  border: 1px solid black;
  text-align: center;
}

.sheW49 {
  grid-area: sheW49;
  text-align: center;
}

.sheW50 {
  grid-area: sheW50;
  text-align: center;
}

.sheW51 {
  grid-area: sheW51;
  text-align: center;
}

.sheW52 {
  grid-area: sheW52;
  text-align: center;
}

.Letter {
  grid-area: Letter;
  border: 1px solid darkgrey;
  text-align: center;
}

.letterCenter {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 130px;
}

#changeColor {
  border: 1px solid darkgrey;
  font-size: 11px;
  display: flex;
  position: relative;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: darkgrey;
  font-weight: bold;
}

#changeColor:hover {
  cursor: pointer;
  background-color: darkgrey;
  color: white;
}

@media all and (-ms-high-contrast:none) {
  .grid-container {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  .Title {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 14;
  }
  .sheW1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW2 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .sheW3 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
  .sheW4 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }
  .sheW5 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }
  .sheW6 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }
  .sheW7 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }
  .sheW8 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }
  .sheW9 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }
  .sheW10 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }
  .sheW11 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }
  .sheW12 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }
  .sheW13 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }
  .sheW14 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW15 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW16 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW17 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW18 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW19 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW20 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW21 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW22 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW23 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW24 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW25 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW26 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW27 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }
  .sheW28 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }
  .sheW29 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }
  .sheW30 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }
  .sheW31 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }
  .sheW32 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }
  .sheW33 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }
  .sheW34 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }
  .sheW35 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }
  .sheW36 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }
  .sheW37 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }
  .sheW38 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
  .sheW39 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .sheW40 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW41 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW42 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW43 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW44 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW45 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW46 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW47 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW48 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW49 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW50 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW51 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .sheW52 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .Letter {
    -ms-grid-row: 3;
    -ms-grid-row-span: 12;
    -ms-grid-column: 2;
    -ms-grid-column-span: 12;
  }
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<div class="generalWrapper">
  <div class="boxes-container">
    <div class="grid-container">
      <div class="Title">SHE</div>
      <div class="sheW1" data="defaultWhite">1</div>
      <div class="sheW2" data="defaultWhite">2</div>
      <div class="sheW3" data="defaultWhite">3</div>
      <div class="sheW4" data="defaultWhite">4</div>
      <div class="sheW5" data="defaultWhite">5</div>
      <div class="sheW6" data="defaultWhite">6</div>
      <div class="sheW7" data="defaultWhite">7</div>
      <div class="sheW8" data="defaultWhite">8</div>
      <div class="sheW9" data="defaultWhite">9</div>
      <div class="sheW10" data="defaultWhite">10</div>
      <div class="sheW11" data="defaultWhite">11</div>
      <div class="sheW12" data="defaultWhite">12</div>
      <div class="sheW13" data="defaultWhite">13</div>
      <div class="sheW14" data="defaultWhite">14</div>
      <div class="sheW15" data="defaultWhite">15</div>
      <div class="sheW16" data="defaultWhite">16</div>
      <div class="sheW17" data="defaultWhite">17</div>
      <div class="sheW18" data="defaultWhite">18</div>
      <div class="sheW19" data="defaultWhite">19</div>
      <div class="sheW20" data="defaultWhite">20</div>
      <div class="sheW21" data="defaultWhite">21</div>
      <div class="sheW22" data="defaultWhite">22</div>
      <div class="sheW23" data="defaultWhite">23</div>
      <div class="sheW24" data="defaultWhite">24</div>
      <div class="sheW25" data="defaultWhite">25</div>
      <div class="sheW26" data="defaultWhite">26</div>
      <div class="sheW27" data="defaultWhite">27</div>
      <div class="sheW28" data="defaultWhite">28</div>
      <div class="sheW29" data="defaultWhite">29</div>
      <div class="sheW30" data="defaultWhite">30</div>
      <div class="sheW31" data="defaultWhite">31</div>
      <div class="sheW32" data="defaultWhite">32</div>
      <div class="sheW33" data="defaultWhite">33</div>
      <div class="sheW34" data="defaultWhite">34</div>
      <div class="sheW35" data="defaultWhite">35</div>
      <div class="sheW36" data="defaultWhite">36</div>
      <div class="sheW37" data="defaultWhite">37</div>
      <div class="sheW38" data="defaultWhite">38</div>
      <div class="sheW39" data="defaultWhite">39</div>
      <div class="sheW40" data="defaultWhite">40</div>
      <div class="sheW41" data="defaultWhite">41</div>
      <div class="sheW42" data="defaultWhite">42</div>
      <div class="sheW43" data="defaultWhite">43</div>
      <div class="sheW44" data="defaultWhite">44</div>
      <div class="sheW45" data="defaultWhite">45</div>
      <div class="sheW46" data="defaultWhite">46</div>
      <div class="sheW47" data="defaultWhite">47</div>
      <div class="sheW48" data="defaultWhite">48</div>
      <div class="sheW48" data="defaultWhite">48</div>
      <div class="sheW48" data="defaultWhite">48</div>
      <div class="sheW49" data="defaultWhite">49</div>
      <div class="sheW50" data="defaultWhite">50</div>
      <div class="sheW51" data="defaultWhite">51</div>
      <div class="sheW52" data="defaultWhite">52</div>
      <div class="Letter">
        <div class="letterCenter">S</div>
      </div>
    </div>
  </div>
</div>

Answer 3

First you should know that id must be unique for an element and class can be reused. So switch your classes and ids.

I would use different classes for each state and toggle between them on each click.

const changeColor = document.getElementsByClassName('changeColor');

Array.from(changeColor).forEach(function(element) {
  element.addEventListener('click', function(event) {
  	item = event.target;
    
    if (item.classList.contains('green')) {
        item.classList.remove('green');
        item.classList.add('red');
    } else if(item.classList.contains('red')) {
        item.classList.remove('red');
        item.classList.add('enableHover');
    } else {
        item.classList.add('green');
        item.classList.remove('enableHover');
    }
  });
});

html {
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fff;
    margin: 0 auto;
    padding: 1em;
}

.generalWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: ;
    position:
}

.boxes-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1280px;
    background-color: ;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "Title Title Title Title Title Title Title Title Title Title Title Title Title Title" "sheW1 sheW2 sheW3 sheW4 sheW5 sheW6 sheW7 sheW8 sheW9 sheW10 sheW11 sheW12 sheW13 sheW14" "sheW52 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW15" "sheW51 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW16" "sheW50 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW17" "sheW49 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW18" "sheW48 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW19" "sheW47 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW20" "sheW46 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW21" "sheW45 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW22" "sheW44 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW23" "sheW43 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW24" "sheW42 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW25" "sheW41 Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter Letter sheW26" "sheW40 sheW39 sheW38 sheW37 sheW36 sheW35 sheW34 sheW33 sheW32 sheW31 sheW30 sheW29 sheW28 sheW27";
    width: 300px;
    height: 320px;
    font-family: sans-serif, helvetica;
    background-color: white;
    background-color: ;
}

.Title {
    grid-area: Title;
    text-align: center;
    background-color:darkslateblue;
    color: white;
    font-size: 1em;
    padding: 5px 0px;
    font-weight: 600;
}

#sheW1 { grid-area: sheW1;
text-align: center;
}

#sheW2 { grid-area: sheW2;
text-align: center;
}

#sheW3 { grid-area: sheW3;
text-align: center;
}

#sheW4 { grid-area: sheW4;
text-align: center;
}

#sheW5 { grid-area: sheW5;
text-align: center;
}

#sheW6 { grid-area: sheW6;
text-align: center;
}

#sheW7 { grid-area: sheW7;
text-align: center;
}

#sheW8 { grid-area: sheW8;
text-align: center;
}

#sheW9 { grid-area: sheW9;
text-align: center;
}

#sheW10 { grid-area: sheW10;
text-align: center;
}

#sheW11 { grid-area: sheW11;
text-align: center;
}

#sheW12 { grid-area: sheW12;
text-align: center;
}

#sheW13 { grid-area: sheW13;
text-align: center;
}

#sheW14 { grid-area: sheW14;
text-align: center;
}

#sheW15 { grid-area: sheW15;
border: 1px solid black;
text-align: center;
}

#sheW16 { grid-area: sheW16;
border: 1px solid black;
text-align: center;
}

#sheW17 { grid-area: sheW17;
text-align: center;
}

#sheW18 { grid-area: sheW18;
text-align: center;
}

#sheW19 { grid-area: sheW19;
text-align: center;
}

#sheW20 { grid-area: sheW20;
text-align: center;
}

#sheW21 { grid-area: sheW21;
border: 1px solid black;
text-align: center;}

#sheW22 { grid-area: sheW22;
text-align: center;
}

#sheW23 { grid-area: sheW23;
text-align: center;
}

#sheW24 { grid-area: sheW24;
text-align: center;
}

#sheW25 { grid-area: sheW25;
border: 1px solid black;
text-align: center;}

#sheW26 { grid-area: sheW26;
text-align: center;
}

#sheW27 { grid-area: sheW27;
text-align: center;
}

#sheW28 { grid-area: sheW28;
text-align: center;
}

#sheW29 { grid-area: sheW29;
text-align: center;
}

#sheW30 { grid-area: sheW30;
border: 1px solid black;
text-align: center;
}

#sheW31 { grid-area: sheW31;
text-align: center;
}

#sheW32 { grid-area: sheW32;
text-align: center;
}

#sheW33 { grid-area: sheW33;
text-align: center;
}

#sheW34 { grid-area: sheW34;
text-align: center;
}

#sheW35 { grid-area: sheW35;
text-align: center;
}

#sheW36 { grid-area: sheW36;
text-align: center;
}

#sheW37 { grid-area: sheW37;
text-align: center;
}

#sheW38 { grid-area: sheW38;
text-align: center;
}

#sheW39 { grid-area: sheW39;
text-align: center;
}

#sheW40 { grid-area: sheW40;
text-align: center;
}

#sheW41 { grid-area: sheW41;
text-align: center;
}

#sheW42 { grid-area: sheW42;
text-align: center;
}

#sheW43 { grid-area: sheW43;
text-align: center;
}

#sheW44 { grid-area: sheW44;
text-align: center;
}

#sheW45 { grid-area: sheW45;
text-align: center;
}

#sheW46 { grid-area: sheW46;
text-align: center;
}

#sheW47 { grid-area: sheW47;
text-align: center;
}

#sheW48 { grid-area: sheW48;
border: 1px solid black;
text-align: center;
}

#sheW49 { grid-area: sheW49;
text-align: center;
}

#sheW50 { grid-area: sheW50;
text-align: center;
}

#sheW51 { grid-area: sheW51;
text-align: center;
}

#sheW52 { grid-area: sheW52;
text-align: center;
}

.Letter { grid-area: Letter;
border: 1px solid darkgrey;
text-align: center;}

.letterCenter {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 130px;
}

.changeColor {
    border: 1px solid darkgrey;
    font-size: 11px;
    display: flex;
    position: relative;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: darkgrey;
    font-weight: bold;
}

.changeColor {
    cursor: pointer;
}

.enableHover:hover {
    background-color:darkgrey;
    color: white;
}

.changeColor.green {
    background-color:green;
}

.changeColor.red {
    background-color:red;
}

@media all and (-ms-high-contrast:none) {
  .grid-container {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .Title {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 14;
  }

  #sheW1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW2 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }

  #sheW3 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }

  #sheW4 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }

  #sheW5 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }

  #sheW6 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }

  #sheW7 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }

  #sheW8 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }

  #sheW9 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }

  #sheW10 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }

  #sheW11 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }

  #sheW12 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }

  #sheW13 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }

  #sheW14 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW15 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW16 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW17 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW18 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW19 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW20 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW21 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW22 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW23 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW24 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW25 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW26 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW27 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 14;
    -ms-grid-column-span: 1;
  }

  #sheW28 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 13;
    -ms-grid-column-span: 1;
  }

  #sheW29 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 12;
    -ms-grid-column-span: 1;
  }

  #sheW30 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 11;
    -ms-grid-column-span: 1;
  }

  #sheW31 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 10;
    -ms-grid-column-span: 1;
  }

  #sheW32 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 9;
    -ms-grid-column-span: 1;
  }

  #sheW33 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 8;
    -ms-grid-column-span: 1;
  }

  #sheW34 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
  }

  #sheW35 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
  }

  #sheW36 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }

  #sheW37 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }

  #sheW38 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }

  #sheW39 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }

  #sheW40 {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW41 {
    -ms-grid-row: 14;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW42 {
    -ms-grid-row: 13;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW43 {
    -ms-grid-row: 12;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW44 {
    -ms-grid-row: 11;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW45 {
    -ms-grid-row: 10;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW46 {
    -ms-grid-row: 9;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW47 {
    -ms-grid-row: 8;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW48 {
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW49 {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW50 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW51 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  #sheW52 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .Letter {
    -ms-grid-row: 3;
    -ms-grid-row-span: 12;
    -ms-grid-column: 2;
    -ms-grid-column-span: 12;
  }

}

<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>S test</title>
        <meta name="description" content="S test">
        <link rel="stylesheet" href="styles/main.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
    </head>
    <body>
    <div class="generalWrapper">  
      <div class="boxes-container">  
        <div class="grid-container">
          <div class="Title">SHE</div>
          <div class="changeColor enableHover" id="sheW1" data="defaultWhite">1</div>
          <div class="changeColor enableHover" id="sheW2" data="defaultWhite">2</div>
          <div class="changeColor enableHover" id="sheW3" data="defaultWhite">3</div>
          <div class="changeColor enableHover" id="sheW4" data="defaultWhite">4</div>
          <div class="changeColor enableHover" id="sheW5" data="defaultWhite">5</div>
          <div class="changeColor enableHover" id="sheW6" data="defaultWhite">6</div>
          <div class="changeColor enableHover" id="sheW7" data="defaultWhite">7</div>
          <div class="changeColor enableHover" id="sheW8" data="defaultWhite">8</div>
          <div class="changeColor enableHover" id="sheW9" data="defaultWhite">9</div>
          <div class="changeColor enableHover" id="sheW10" data="defaultWhite">10</div>
          <div class="changeColor enableHover" id="sheW11" data="defaultWhite">11</div>
          <div class="changeColor enableHover" id="sheW12" data="defaultWhite">12</div>
          <div class="changeColor enableHover" id="sheW13" data="defaultWhite">13</div>
          <div class="changeColor enableHover" id="sheW14" data="defaultWhite">14</div>
          <div class="changeColor enableHover" id="sheW15" data="defaultWhite">15</div>
          <div class="changeColor enableHover" id="sheW16" data="defaultWhite">16</div>
          <div class="changeColor enableHover" id="sheW17" data="defaultWhite">17</div>
          <div class="changeColor enableHover" id="sheW18" data="defaultWhite">18</div>
          <div class="changeColor enableHover" id="sheW19" data="defaultWhite">19</div>
          <div class="changeColor enableHover" id="sheW20" data="defaultWhite">20</div>
          <div class="changeColor enableHover" id="sheW21" data="defaultWhite">21</div>
          <div class="changeColor enableHover" id="sheW22" data="defaultWhite">22</div>
          <div class="changeColor enableHover" id="sheW23" data="defaultWhite">23</div>
          <div class="changeColor enableHover" id="sheW24" data="defaultWhite">24</div>
          <div class="changeColor enableHover" id="sheW25" data="defaultWhite">25</div>
          <div class="changeColor enableHover" id="sheW26" data="defaultWhite">26</div>
          <div class="changeColor enableHover" id="sheW27" data="defaultWhite">27</div>
          <div class="changeColor enableHover" id="sheW28" data="defaultWhite">28</div>
          <div class="changeColor enableHover" id="sheW29" data="defaultWhite">29</div>
          <div class="changeColor enableHover" id="sheW30" data="defaultWhite">30</div>
          <div class="changeColor enableHover" id="sheW31" data="defaultWhite">31</div>
          <div class="changeColor enableHover" id="sheW32" data="defaultWhite">32</div>
          <div class="changeColor enableHover" id="sheW33" data="defaultWhite">33</div>
          <div class="changeColor enableHover" id="sheW34" data="defaultWhite">34</div>
          <div class="changeColor enableHover" id="sheW35" data="defaultWhite">35</div>
          <div class="changeColor enableHover" id="sheW36" data="defaultWhite">36</div>
          <div class="changeColor enableHover" id="sheW37" data="defaultWhite">37</div>
          <div class="changeColor enableHover" id="sheW38" data="defaultWhite">38</div>
          <div class="changeColor enableHover" id="sheW39" data="defaultWhite">39</div>
          <div class="changeColor enableHover" id="sheW40" data="defaultWhite">40</div>
          <div class="changeColor enableHover" id="sheW41" data="defaultWhite">41</div>
          <div class="changeColor enableHover" id="sheW42" data="defaultWhite">42</div>
          <div class="changeColor enableHover" id="sheW43" data="defaultWhite">43</div>
          <div class="changeColor enableHover" id="sheW44" data="defaultWhite">44</div>
          <div class="changeColor enableHover" id="sheW45" data="defaultWhite">45</div>
          <div class="changeColor enableHover" id="sheW46" data="defaultWhite">46</div>
          <div class="changeColor enableHover" id="sheW47" data="defaultWhite">47</div>
          <div class="changeColor enableHover" id="sheW48" data="defaultWhite">48</div>
          <div class="changeColor enableHover" id="sheW48" data="defaultWhite">48</div>
          <div class="changeColor enableHover" id="sheW48" data="defaultWhite">48</div>
          <div class="changeColor enableHover" id="sheW49" data="defaultWhite">49</div>
          <div class="changeColor enableHover" id="sheW50" data="defaultWhite">50</div>
          <div class="changeColor enableHover" id="sheW51" data="defaultWhite">51</div>
          <div class="changeColor enableHover" id="sheW52" data="defaultWhite">52</div>
          <div class="Letter">
            <div class="letterCenter">S</div>
          </div>
        </div>
      </div> 
    </div>
    </body>
</html>