css - JavaScript outputting a deck floor plan -

i'm new javascript. need output floor plan of deck following calculation of how many boards needed, given deck length , width, along board length , width. calculations work floor plan not outputting correctly. should change in last loop output plan?

for example if there 10 8x1-foot boards 16x5 foot deck, might
-------- --------
-------- --------
-------- --------
-------- --------
-------- --------

my code below. have loop give me board of "---" based on board length. underneath sad loop trying output floor plan of based on width of deck(deckwidth) , length of (decklength).

$(document).ready(function() {    	var deckarea;  	var boardarea;  	var numboards;  	var total;  	var dlength;  	var dwidth;  	var blength;  	var bwidth;  	var bprice;  	var planboard = "";  	  	$("#decklength").keyup(function(){  		if((isnan(this.value) === false) && this.value !== "") {  			dlength = parsefloat(this.value);  		}  	});  	  	$("#deckwidth").keyup(function(){  		if((isnan(this.value) === false) && this.value !== "") {  		 dwidth = parsefloat(this.value);  		}  	});  	  	$("#boardlength").keyup(function(){  		if((isnan(this.value) === false) && this.value !== "") {  			blength = parsefloat(this.value);  		}  	});  	  	$("#boardwidth").keyup(function(){  		if((isnan(this.value) === false) && this.value !== "") {  			bwidth = parsefloat(this.value);  		}  	});  	  	$("#boardprice").keyup(function(){  		if((isnan(this.value) === false) && this.value !== "") {  			bprice = parsefloat(this.value);  		}  	});  	  	$("#deckcalc").on("click", function () {  		numboards = 0;  		total = 0;  		  		deckarea = dlength * dwidth;  		boardarea = blength * bwidth;  		numboards = deckarea/boardarea;  		total = numboards * bprice;  		  		//output total screen  		$("#cost").text("$"+total.tofixed(2));  		$("#boardsneeded").text(numboards);  		  		for(var y = 0; y < (blength); y++) {  			planboard += "-";  		}  		  		  		for (var = 0; < dlength; i++) {  			"<br>";  			for (var x = 0; x < dwidth; x++) {  				document.getelementbyid("plan").innerhtml = planboard;  			}  		}  	});    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <label>deck length</label><input type="text" id="decklength" />  <label>deck width</label><input type="text" id="deckwidth" />  <label>board length</label><input type="text" id="boardlength" />  <label>board width</label><input type="text" id="boardwidth" />  <label>board price</label><input type="text" id="boardprice" />  <button id="deckcalc">calcit</button>  <div id="plan"></div>

in loop you're overwriting .innerhtml property every time through. want add property instead using +=:

also, noted in comments, want add <br /> tag output well.

$(document).ready(function() {    	var deckarea;  	var boardarea;  	var numboards;  	var total;  	var dlength;  	var dwidth;  	var blength;  	var bwidth;  	var bprice;  	var planboard = "";  	  	$("#decklength").keyup(function(){  		if((isnan(this.value) === false) && this.value !== "") {  			dlength = parsefloat(this.value);  		}  	});  	  	$("#deckwidth").keyup(function(){  		if((isnan(this.value) === false) && this.value !== "") {  		 dwidth = parsefloat(this.value);  		}  	});  	  	$("#boardlength").keyup(function(){  		if((isnan(this.value) === false) && this.value !== "") {  			blength = parsefloat(this.value);  		}  	});  	  	$("#boardwidth").keyup(function(){  		if((isnan(this.value) === false) && this.value !== "") {  			bwidth = parsefloat(this.value);  		}  	});  	  	$("#boardprice").keyup(function(){  		if((isnan(this.value) === false) && this.value !== "") {  			bprice = parsefloat(this.value);  		}  	});  	  	$("#deckcalc").on("click", function () {  		numboards = 0;  		total = 0;  		  		deckarea = dlength * dwidth;  		boardarea = blength * bwidth;  		numboards = deckarea/boardarea;  		total = numboards * bprice;  		  		//output total screen  		$("#cost").text("$"+total.tofixed(2));  		$("#boardsneeded").text(numboards);  		  		for(var y = 0; y < (blength); y++) {  			planboard += "-";  		}  		  		  		for (var = 0; < dlength; i++) {  			planboard += "<br>";  			for (var x = 0; x < dwidth; x++) {  				document.getelementbyid("plan").innerhtml += planboard;  			}  		}  	});    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <label>deck length</label><input type="text" id="decklength" />  <label>deck width</label><input type="text" id="deckwidth" />  <label>board length</label><input type="text" id="boardlength" />  <label>board width</label><input type="text" id="boardwidth" />  <label>board price</label><input type="text" id="boardprice" />  <button id="deckcalc">calcit</button>  <div id="plan"></div>