无样式关于制作预约，一人预约多人的思路

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script src="./js_.js" type="text/javascript" charset="utf-8"></script>
<!-- <link rel="stylesheet" type="text/css" href="Layui/css/layui.css"/> -->
</head>
<body>
<style type="text/css">
.sonone{
border: 1px solid red;
padding: 1%;
}
b{
color: red;
}
.meun{
display: none;
}
</style>
<div class="sonone">
<input type="text" name="" id="" value="" class="layui-text" placeholder="请输入姓名"/><br>
<input type="text" name="" id="" value="" class="layui-text" placeholder="请输入身份证信息"/><br><br>
<p>服务项目<b>*</b> 门票预约</p>
<p>预约时间<b>* </b> <input type="date" name="" id="" value="" /> </p>
<p>是否发烧 <input type="text" name="" id="" value="" placeholder="是否发烧"/> </p>
<p>人数<b>*</b> <button type="button" >-</button><span>0</span><button type="button">+</button> </p>

</div>
<div id="" class="meun">
<div id=""class="meunson">
姓名：<input type="text" name="" id="" value="" class="layui-text" placeholder="请输入姓名"/><br>
身份证<input type="text" name="" id="" value="" class="layui-text" placeholder="请输入身份证信息"/><br><br>
</div>

</div>


<center><button type="button" onclick="clic()">立即预约</button></center> 
</body>
<script type="text/javascript">
var list=[]//声明一个全新的数组 存放提交的数据
var num=1;//默认人数


var put=$(".sonone button")

var son=$(".sonone span").html(num)
put[0].onclick=function(){
--num;
if(num<1){
alert("最少预约一人")
++num;
}else{
var son=$(".sonone span").html(num)
let sontext=''
for(let i =1 ;i<num;i++){

sontext=sontext+'<div id=""class="meunson">姓名'+i+'：<input type="text" name="" id="" value="" class="layui-text" placeholder="请输入姓名"/><br>身份证'+i+'<input type="text" name="" id="" value="" class="layui-text" placeholder="请输入身份证信息"/><br><br></div>'

}
$(".meun").html(sontext)
if(num==1){
$(".meun").css("display","none")
}
}

}    
put[1].onclick=function(){
++num;
if(num>5){
alert("算自己，最多填写五人！！！")
--num;
}else{
var son=$(".sonone span").html(num)
if(num>1){

$(".meun").css("display","block")
let sontext=''
for(let i =1 ;i<num;i++){

sontext=sontext+'<div id=""class="meunson">姓名'+i+'：<input type="text" name="" id="sss" value="" class="layui-text" placeholder="请输入姓名"/><br>身份证'+i+'<input type="text" name="" id="sss" value="" class="layui-text" placeholder="请输入身份证信息"/><br><br></div>'

}

$(".meun").html(sontext)

}

}

}

function clic(){
var name=$(".sonone input")[0].value//姓名
var iden=$(".sonone input")[1].value//身份证号
var data=$(".sonone input")[2].value//日期 公用
var su=$(".sonone input")[3].value//发烧公用


if(name!=''&&iden!=''&&data!=''&&su!='' ){


let listone=[name,iden,data,su,num]
list.push(listone)

if(num>1){

var nums=$(".meunson").length
// var listones=[]
let listoness=[]
for(let i=0;i<nums;i++){
//获取页面元素的子元素因为是固定的可以直接去每一次循环时候的子元素下标
let ones=$(".meunson")[i].children[0].value
let oness=$(".meunson")[i].children[2].value
listoness=[name,ones,oness,data,su]
// listones.push(listoness)
listone.push(listoness)

}


}
console.log(list)
// location.reload();

}else{
alert("存在为空输入")
}

}




</script>
</html>