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个呀？