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 > & lt; /div > ");
var div2 = $("& lt; div > & lt; /div > ");
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 > & lt; /h1 > ");
$(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(); .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;
} <!DOCTYPE html >
<html lang = "en" >
<head>
<meta charset="UTF-8">
<title>Home Page | Roctober92.net</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="abuelos.css">
</head>
<body>
<main>
<div class="whole" id="one">
<div class="left">
<div class="left_column" id="firstL">
</div>
</div>
<div class="right_column" id="firstR">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="abuelos.js"></script>
</main>
</body>
</html> My goal:
- Create a DIV for each item in the list using a for-loop
- Add a class to each DIV with a specific name == list[y]
- Include another for-loop inside with different list items(z)
- If y == (a number) and z == (a number), adjust the CSS of a unique class
THE ISSUE: It only functions correctly if I reference the element as $(div2), which modifies the last div2 I append instead of a specific one. I would prefer it to edit the first div2 I append (with names[0] as the class name). However, it doesn't recognize it. As you press 'Photo' alongside the first box in the code snippet, a picture should appear in the box.