title: Editing CSS class within if statement and for-loop
body: <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>var first_left = ['Photo', 'Info', 'Question 1', 'Question 2', 'Question 3', 'Question 4', 'Question 5'];
  
  var names = ['Abuela', 'Abuelo', 'Oma'];
  
  function display() {
      for (var y = 0; y &lt; names.length; y++) {
          var rc = document.getElementById('firstR');
          var div1 = $("&lt;div&gt;&lt;/div&gt;");
          var div2 = $("&lt;div&gt;&lt;/div&gt;");
          div2.addClass(names[y]);
          $(rc).append(div1);
          $(rc).append(div2);
          $(div1).css("border", "0px solid green");
          $(div2).css("border", "5px solid black");
          $(div1).css("height", "80px");
          $(div1).css("margin-top", "3em");
          $(div2).css("height", "380px");
          $(div2).css("margin-top", "3em");
          $(div2).css("margin-bottom", "12em");
          var h = $("&lt;h1&gt;&lt;/h1&gt;");
          $(h).html(names[y]);
          $(h).css("font-size", "60px");
          $(h).css("margin", "auto");
          $(h).css("text-align", "center");
          $(div1).append(h);
  
          for (var z = 0; z &lt; first_left.length; z++) {
              var lc = document.getElementById('firstL');
              var div = document.createElement('div');
              div.className = first_left[z];
              var p = document.createElement('p');
              p.innerHTML = first_left[z];
              div.appendChild(p);
              lc.appendChild(div);
              p.style.margin = 'auto';
              p.style['font-size'] = '25px';
              p.style['text-align'] = 'center';
              div.style.border = '0px solid black';
              div.style.height = '40px';
              div.style.width = '120px';
              div.style['margin-top'] = '3em';
              if (z == 6) {
                  div.style['margin-bottom'] = '10em';
              }
              div.style['background-color'] = 'deepskyblue';
              div.style['grid-row'] = [z + 1] + '/' + [z + 2];
              div.style.transition = "transform .5s";
              div.style['border-radius'] = '10px';
              $(div).hover(function () {
                  $(this).css({
                      transform: 'scale(1.3)'
                  });
              }, function () {
                  $(this).css({
                      transform: 'scale(1)'
                  })
              });
              if (y == 0 &amp;&amp; z == 0) {
                  div.onclick = function() {
                      $("." + names[0]).css("backgroundImage", "url('abuelos/oma.jpg')");
                      $("." + names[0]).css("backgroundSize", "550px 500px");
                  }
              };
              if (y == 1 &amp;&amp; z == 0) {
                  div.onclick = function() {
                      $(div2).css("backgroundImage", "url('abuelos/gma.jpg')");
                      $(div2).css("backgroundSize", "cover");
                  }
              }
          }
      };
  };
  
  display();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.whole {
      display: flex;
      justify-content: space-between;
  }
  
  .left {
      display: grid;
      width: 100%;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 80px 80px 80px 80px 80px 80px 80px;
  }
  
  .left_column {
      grid-column: 2/3;
  }
  
  .right_column {
      width: 100%;
      height: 560px;
      margin-right: 3em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Home Page | Roctober92.net&lt;/title&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
          &lt;meta name="viewport" content="width=device-width"&gt;
          &lt;link rel="stylesheet" type="text/css" href="abuelos.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;main&gt;
              &lt;div class="whole" id="one"&gt;
                  &lt;div class="left"&gt;
                      &lt;div class="left_column" id="firstL"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="right_column" id="firstR"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
              &lt;script src="abuelos.js"&gt;&lt;/script&gt;
          &lt;/main&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My objective:</p>
  
  <ol>
  <li>Create DIV for every item in list via for-loop</li>
  <li>Add class to each DIV with name == list[y]</li>
  <li>Place another for-loop within with different list items(z)</li>
  <li>If y == (a number) and z == (a number), edit the CSS of a distinctive class</li>
  </ol>
  
  <p>THE PROBLEM: It only works if I refer to the item as being $(div2), which edits the last div2 I append, not a specific one. I'd rather it edit the first div2 I append (with names[0] as the class name). But it's not recognizing it. In the code-snippet, as you press 'Photo' alongside the first box, a picture should show up in the box.</p>