js如何做到点“添加”下方的已选区域就会多出一个名字为已选区域的按钮？

Question

 <div  class="center">           <label>服务区域</label>           <div class="yixuanquyu">                      <select  class="middle_1" id="qu">               <option value="-1">--请选择--</option>               <c:if test="${!empty listArea }">                <c:forEach items="${listArea}" var="list">                <option value="${list.id }">${list.name }</option>                </c:forEach>            </c:if>           </select>                <select class="middle_1" id="jiedao">               <option value="-1">--请选择--</option>           </select>                      <input class="search" type="button" value="添加" >           <span class="blank_1">可选1—5个</span>           </div>   </div>   <div  class="center">           <label>已选区域</label>           <div class="yixuanquyu">           <input class="yixuanquyu_1"type="button" value="中关村" >                      </div>   </div>1.js如何做到点“添加”下方的已选区域就会多出一个名字为已选区域的按钮？2.input传到后台的值可以跟显示值不一样吗？3.如何控制最多选择5个呀？