JSFiddle - React, Tailwind, and code Playground

by Rohit Goyal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <select class="select-buttons">
			<option>0</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>
			<option>8</option>
			<option>9</option>
			<option>10</option>
		</select>
		
		<div class="buttons-cover"></div>

CSS

.select-buttons{
				width:200px;
				padding:10px;
			}
			
			.buttons-cover{
				margin-top:20px;
			}
			
			button{
				padding:10px 20px;
				float: left;
				margin-right:10px;
				border:1px solid #449D44;
				outline: none;
				color:#fff;
				background:#5cb85c;
			}

JavaScript

$(document).ready(function(){
				$(".select-buttons").change(function(){
				 $(".buttons-cover").empty();	
				var numBtn = $(this).children(":selected").text();	
				 
				 for(i=1;i<= numBtn;i++){
					$(".buttons-cover").append("<button>" + "click" + "</button>");
				  }
				});
			});