How to make grid to be on a background?

Question

I want grid elements to be on a background and circles to be on the top of the grid. Scatter circles function is commented out because otherwise grid disappears. I do not know why.... I know something is wrong because I add circles and grid cells as children to a same div. But I am not completely sure. JSFiddle_Code

Any ideas how to go about it? Thank you

var arr_circles = [];
var radius = 40;

var cell_side_len = 50;

var grid_width = 400;
var grid_height = 300;

var container = document.getElementById("container");
container.style.border = "solid black";
container.style.width = grid_width+"px";
container.style.height = grid_height+"px";

//create grid
for(var i = 0; i < grid_width/cell_side_len; i++){
    for(var j = 0; j < grid_height/cell_side_len; j++){
    var cell = document.createElement('div');
    cell.style.boxSizing = "border-box";
    cell.style.height = cell_side_len + 'px';
    cell.style.width = cell_side_len + 'px';
    cell.style.border = "1px solid black";
    cell.style.float = "left";
    cell.style.position = "relative";
    container.appendChild(cell);
   }
}


//scatter();

function scatter(){

    while (container.firstChild) {
        container.removeChild(container.firstChild);
    }

    var numDisks = document.getElementById("numDisks").value;
    if( isNaN(numDisks) ) numDisks = 5;

    arr_circles = [];
    
    for(i = 0; i < numDisks; i++){
        var circle = document.createElement('circle');
        circle.style.cssText = ' width: 40px; height: 40px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; position: absolute; z-index: 9;';
        circle.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
        circle.style.left = Math.round(Math.random() * (grid_width - radius*2.5) + radius) + "px";
        circle.style.top = Math.round(Math.random() * (grid_height - radius*2.5) + radius) + "px";
        arr_circles.push(circle);
        container.appendChild(circle);
        dragElement(circle);


    }
    //Make the DIV element draggagle:
    //dragElement(document.getElementById(("circle")));

    function dragElement(elmnt) {
      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      elmnt.onmousedown = dragMouseDown;
      

        function dragMouseDown(e) {
            e = e || window.event;
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            /* stop moving when mouse button is released:*/
            document.onmouseup = null;
            document.onmousemove = null;
        }

    }
}

 <input type="text" id="numDisks" value="#ofcircles...">

<button onclick="scatter()">Scatter</button>

<div id="container"></div>

    

Answer 1

It's because you're removing the grid at the start of your scatter function. Just remove the while loop:

var arr_circles = [];
var radius = 40;

var cell_side_len = 50;

var grid_width = 400;
var grid_height = 300;

var container = document.getElementById("container");
container.style.border = "solid black";
container.style.width = grid_width+"px";
container.style.height = grid_height+"px";

//create grid
for(var i = 0; i < grid_width/cell_side_len; i++){
    for(var j = 0; j < grid_height/cell_side_len; j++){
    var cell = document.createElement('div');
    cell.style.boxSizing = "border-box";
    cell.style.height = cell_side_len + 'px';
    cell.style.width = cell_side_len + 'px';
    cell.style.border = "1px solid black";
    cell.style.float = "left";
    cell.style.position = "relative";
    container.appendChild(cell);
   }
}

// scatter circles
scatter();

function scatter(){

//    while (container.firstChild) {
//        container.removeChild(container.firstChild);
//    }

    var numDisks = document.getElementById("numDisks").value;
    if( isNaN(numDisks) ) numDisks = 5;

    arr_circles = [];
    
    for(i = 0; i < numDisks; i++){
        var circle = document.createElement('circle');
        circle.style.cssText = ' width: 40px; height: 40px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; position: absolute; z-index: 9;background:red';
        circle.style.left = Math.round(Math.random() * (grid_width - radius*2.5) + radius) + "px";
        circle.style.top = Math.round(Math.random() * (grid_height - radius*2.5) + radius) + "px";
        arr_circles.push(circle);
        container.appendChild(circle);
        
 }
}

<input type="text" id="numDisks" value="#ofcircles...">

<button onclick="scatter()">Scatter</button>

<div id="container"></div>