My Tabbed Interface

I'm trying to create something like a chat tab interface

by al nmeri

HTML

<div id="wrapper">
  <div data-tabname="one">Tab one</div>
  <div data-tabname="two">Tab two</div>
  <div data-tabname="three">Tab three</div>
</div>

CSS

#wrapper {
	height: 30%;
	width: auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	box-sizing: border-box;
	padding: 1% 0;
}
    div {
	height: 125px;
	width: 50%;
	border: 1px solid;
	margin: 0 1%;
}

button {
	width: 20%;
	height: 35px;
	background: #ebb;
	flex: 1 auto;
	border: 1px dotted;
}

button.hide {
	display: none;
}

button:hover {
	background: #daa;
}

JavaScript

function asTabs(node) {
var button = document.createElement("BUTTON");
var tempArray = [];
var nodeChildren = Array.prototype.slice.call(node.childNodes);
// I'm trying to sift div elements from all the children of the parent node
nodeChildren.filter(function(){
for (var i = 0; i < nodeChildren.length; i++) {
if (nodeChildren[i].nodeType === 1) {
tempArray += nodeChildren[i];
return tempArray;
}
}
});
// I'm using this line to see what was or if anything was actually filtered
console.log(tempArray); 
nodeChildren.forEach(function (){
for (var j = 0; j < nodeChildren.length; j++) {
node.insertBefore(button, nodeChildren[j]);
var buttons = document.getElementsByTagName("button");
// Now I want to make the string in each button equal to their data attribute value
for (var k = 0; k < buttons.length; k++) {
buttons[k].innerHTML = nodeChildren[j].getAttribute("data-tabname").textContent;
}
}
});
// creating an array of hidden tabs
var hide = nodeChildren.slice(1);
for (var l = 0; l < hide.length; l++) {
hide[l].className = "hide";
}
buttons[k].addEventListener("click", function (){
if (nodeChildren[j].className = "") {
nodeChildren[j].className = "hide";
}
else nodeChildren[j].className = "";
});
  }
  asTabs(document.querySelector("#wrapper"));