javascript - 根据下拉菜单中选择的数字创建多个 Div

Question

所以我有一个下拉菜单，人们可以在其中选择他们拥有的商店数量。根据此选择，我需要创建一个包含每个位置的商店信息的 div。

例如，如果他们选择 3 个商店，那么将显示三个相同的 div，供他们为每个商店填写。

这是我的输入和 div 代码。

<input form='form1' type='number' name='numberOfLocations' 
    id='numberOfLocations' size="2" maxlength="2" />
<div class='businessSpecifics'>
    <label>URL Extension:</label>
    <br>
    <input form='form1' type='text' name='urlExtension' 
        placeholder="businessname" id='businessSpecificsURL' 
        class='businessSpecifics details' /><span>.byMyCompany.com</span>
    <br>
    <label>Login Email:</label>
    <br>
    <input form='form1' type='email' name='email' 
        placeholder='email' id='businessSpecificsEmail' 
        class='businessSpecifics details' />
    <br>
    <label>Password:</label>
    <br>
    <input form='form1' type='password' name='tempPswd' 
        placeholder="" 
        class='businessSpecifics details' />
    <br>
    <label>Business Website:</label>
    <br>
    <input form='form1' type='text' name='bussinessWebsite' 
        placeholder="Business Website" 
        class='businessSpecifics details' />    
</div>

Answer 1

$(function(){
  $("#numberOfLocations").change(function(){
       var value = $(this).val();
       $(".blockContainer").empty();
       for(var i = 0; i<value; i++){
            var block = $("<div>",{class:"block"});
            $(block).append($("div.businessSpecifics").html());
            $(".blockContainer").append(block);
         }
    }); 
  
 });

div.businessSpecifics{
  display:none;    
}
.block{
  width:160px;
  height:200px;
  border:solid 1px black;
  margin:10px;
  box-shadow:0px 0px 7px #000;
  padding:5px;
  position:relative;
  float:left;
  }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<input  type='number' name='numberOfLocations' id='numberOfLocations' size="2" maxlength="2" />
<div class="blockContainer"></div>
<div class='businessSpecifics'>
    <label>URL Extension:</label>
    <br>
    <input  type='text' name='urlExtension' 
        placeholder="businessname" id='businessSpecificsURL' 
        class='businessSpecifics details' /><span>.byMyCompany.com</span>
    <br>
    <label>Login Email:</label>
    <br>
    <input  type='email' name='email' 
        placeholder='email' id='businessSpecificsEmail' 
        class='businessSpecifics details' />
    <br>
    <label>Password:</label>
    <br>
    <input  type='password' name='tempPswd' 
        placeholder="" 
        class='businessSpecifics details' />
    <br>
    <label>Business Website:</label>
    <br>
    <input  type='text' name='bussinessWebsite' 
        placeholder="Business Website" 
        class='businessSpecifics details' />    
</div>