fixedcode

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script>
	var devices = ['computer', 'router']
	var device_types = {
		'computer': ['laptop', 'desktop'],
		'router': ['wireless', 'bluetooth']
	}

	var brands = {
		'laptop': ['HP', 'DELL'],
		'desktop': ['Apple', 'MAC'],
		'wireless':['Foo','Bar'],
		'bluetooth':['Grren','Blue']
	}


	function createOptions(arr) {
		var html = ['<option >--select--</option>'];
		$.each(arr, function(i, item) {
			html.push('<option value="' + item + '">' + item + '</option>')
		});
		return html.join('');
	}

	var mainOptions = createOptions(devices)

	$(function() {
		$("input[type=button][value=Add]").click(function(e) {
			for (i = 0; i < document.getElementById('sel').value; i++) {
				e.preventDefault();
				var j = 1;

				var newDiv = $('<div class="row">').appendTo("#dropbox");
				$("<select class='devices has_dependents'>").attr("name", "input1_" + j).append(mainOptions).appendTo(newDiv)

				$("<select class='device_types has_dependents'>").attr("name", "input2_" + j).appendTo(newDiv)
				$("<select class='brands'>").attr("name", "input3_" + j).appendTo(newDiv)
				$("<input>").attr("name", "input4_" + j).appendTo(newDiv);
				$("<button>").text("Remove").appendTo(newDiv).click(function(e) {
					e.preventDefault();
					$(this).parent().remove();
				})
				j++;
			}
		});

		$(document).on('change', 'select.has_dependents', function() {
			var val = $(this).val(),
					option_obj;
			if ($(this).is('.devices')) {
				option_obj = device_types;
			} else {
				option_obj = brands;
			}


			var options = createOptions( option_obj[val]);


			$(this).next().html(options)
		})
	})
	</script>
</head>

<body>
<form>
	<select id="sel">
		<option value="" selected="selected"></option>
		<option value="01" >01</option>
		<option value="02" >02</option>
		<option value="03" >03</option>
		<option value="04" >04</option>
		<option value="05" >05</option>
		<option value="06" >06</option>
		<option value="07" >07</option>
		<option value="08" >08</option>
		<option value="09" >09</option>
		<option value="10" >10</option>
		<option value="11" >11</option>
		<option value="12" >12</option>
		<option value="13" >13</option>
		<option value="14" >14</option>
		<option value="15" >15</option>
	</select>
	<input type="button" value="Add" />

	<div id="dropbox"></div>
</form>
</body>
</html>