zonayedpca/ShahadatProblemFinale.html

## ShahadatProblemFinale.html
<html>
	<head>
	  <title>Product Select</title>
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <!-- jQuery library -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<!-- Latest compiled JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>

	<body>
		<div class="pv-dropdown-area">
			<div class="col-md-offset-3 col-md-6 col-md-offset-3">
				<div class="panel panel-default">
	                <div class="panel-heading">
	                    <i class="fa fa-table"></i> Table Detail
	                </div>
	                <div class="panel-body no-padding table-responsive" style="max-height: 400px;overflow: auto;">
	                    <form action="" method="get" >

	                    	<table id="table-productattribute" class="table table-striped table-bordered table-work">
			                    <thead>
			                        <tr>
			                                <th>Product Attribute Type</th>
			                                <th>Description</th>
			                        </tr>
			                    </thead>
			                    <tbody>
			                    	<tr>
			                    		<td class="attribute_id">Size</td>
			                    		<td class="description">rrrr,44444,ttt</td>
			                    	</tr>


			                    	<tr>
			                    		<td class="attribute_id">Color</td>
			                    		<td class="description">red,green</td>

			                    	</tr>
			                    	<tr>
			                    		<td class="attribute_id">Weight</td>
			                    		<td class="description">50,20,30</td>

			                    	</tr>

			                    </tbody>
		                    </table>
		                    <input type="button" class="btn btn-primary table-submit" value="Submit" onclick="newk()">
	                    </form>
	                </div>
	            </div>
			</div>
			<div class="col-md-offset-3 col-md-6 col-md-offset-3">
				<form name="selectsize" action="" method="get" class="select-size-form">
					<div class="row" id="viewsdata">
					</div>
				</form>
			</div>
		</div>


        <script>
            var newk = function(){
                var alltr = document.querySelectorAll('.attribute_id'),
                    alldesc = document.querySelectorAll('.description'),
                    viewData = document.querySelector('#viewsdata');

                var option = [];
                alldesc.forEach(function(desc) {
                    var descs =  desc.innerText;
                    var spliteddesc = descs.split(',');
                    option.push(spliteddesc);
                });

                alltr.forEach(function(tr, index) {
                    var options = option[index].map(function(op) {
                        return '<option value="'+ op +'">'+ op +'</option>'
                    });

                    viewData.insertAdjacentHTML('afterbegin', '<div class="col-md-4"><div class="form-group"><label for="variation-'+tr.innerHTML.toLowerCase()+'">' + tr.innerHTML +'</label><select name="s-'+ tr.innerHTML.toLowerCase() +'" id="variation-'+tr.innerHTML.toLowerCase()+'" class="form-control">' + options +'</select></div></div>');
                });
			}
        </script>


	</body>
</html>
	<html>
	<head>
	<title>Product Select</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>

	<body>
	<div class="pv-dropdown-area">
	<div class="col-md-offset-3 col-md-6 col-md-offset-3">
	<div class="panel panel-default">
	<div class="panel-heading">
	<i class="fa fa-table"></i> Table Detail
	</div>
	<div class="panel-body no-padding table-responsive" style="max-height: 400px;overflow: auto;">
	<form action="" method="get" >

	<table id="table-productattribute" class="table table-striped table-bordered table-work">
	<thead>
	<tr>
	<th>Product Attribute Type</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td class="attribute_id">Size</td>
	<td class="description">rrrr,44444,ttt</td>
	</tr>


	<tr>
	<td class="attribute_id">Color</td>
	<td class="description">red,green</td>

	</tr>
	<tr>
	<td class="attribute_id">Weight</td>
	<td class="description">50,20,30</td>

	</tr>

	</tbody>
	</table>
	<input type="button" class="btn btn-primary table-submit" value="Submit" onclick="newk()">
	</form>
	</div>
	</div>
	</div>
	<div class="col-md-offset-3 col-md-6 col-md-offset-3">
	<form name="selectsize" action="" method="get" class="select-size-form">
	<div class="row" id="viewsdata">
	</div>
	</form>
	</div>
	</div>






	<script>
	var newk = function(){
	var alltr = document.querySelectorAll('.attribute_id'),
	alldesc = document.querySelectorAll('.description'),
	viewData = document.querySelector('#viewsdata');

	var option = [];
	alldesc.forEach(function(desc) {
	var descs = desc.innerText;
	var spliteddesc = descs.split(',');
	option.push(spliteddesc);
	});

	alltr.forEach(function(tr, index) {
	var options = option[index].map(function(op) {
	return '<option value="'+ op +'">'+ op +'</option>'
	});

	viewData.insertAdjacentHTML('afterbegin', '<div class="col-md-4"><div class="form-group"><label for="variation-'+tr.innerHTML.toLowerCase()+'">' + tr.innerHTML +'</label><select name="s-'+ tr.innerHTML.toLowerCase() +'" id="variation-'+tr.innerHTML.toLowerCase()+'" class="form-control">' + options +'</select></div></div>');
	});
	}
	</script>







	</body>
	</html>