For instance, if N is 3 in each row, as more elements are added to the array, the number of rows will increase but each row will still have a maximum of 3 elements.
I am currently using map to generate corresponding divs for every element in the array. However, the divs are just stacking on top of each other. What I actually desire is:
https://i.sstatic.net/848b1.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<br>
<div style="display: flex;">
<div id="deck" style="flex: 1;width:500px;height:300px;text-align:center;background-color:green;margin:0 auto;">CARDS</div>
<div id="discard" style="flex: 0.5 1 30%;width:500px;height:300px;text-align:center;background-color:yellow;margin:0 auto;">DISCARDS</div>
</div>
<div id="cards" style="background-color:orange;margin:0 auto;text-align:center">XYZ</div>
<script type="text/javascript">
let cards = ["xf"];
addCard("xa");
function addCard(card){
cards.push(card);
document.getElementById('cards').innerHTML = cards.map(c =>
`<div>
<div id="${c}" onclick="selectCard(this)" style="width:50px;height:30px;text-align:center">${c}</div>
</div>`
).join('')
}
</script>
</body>
</html>