[EDIT] I tried to dynamically create 6 horizontal lines every 1 second using the setTimeout method. Thus, it should display every 6 horizontal lines as a group for every 1 second. Here I name 6 horizontal lines as a group. However, I want to add each group horizontally, not vertically. If you try to add a group and the border width is not enough to accommodate a new group, add the new group in the following lines. And also I want a “Pilar” between each channel of 6 horizontal lines, and I only want to create 8 groups of horizontal lines. The first image below is what I get after running my code. The second is what I need. The code below is the html, css and js code. Hope someone can help me. Thanks in advance.
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
<div id = "output">
</div>
</body>
</html>
CSS
.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
margin-right: 20px;
}
#output {
background: #ffe6e6;
width: 600px;
height: 800px;
position:absolute;
}
js:
$(document).ready(function() {
makeItHappen(0);
});
function makeItHappen(order) {
for (var i = 0; i < 7; i++) {
var hr = document.createElement('hr');
hr.className = "deco"
hr.id = "hr" + i;
$('#output').append(hr);
}
makeTable(function() {
if(++order < 7) {
makeItHappen(order);
}
});
}
function makeTable(callback) {
setTimeout(function() {
callback();
}, 1000);
}