JS 修改表单name下标的问题

 <ul id="listUl">
   
  </ul>
  <button id="add">添加</button>
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
 var index=0;
 $("#add").click(function(){
 	var html='';
    html+='<li class="ItemUl">';
         html+='<div class="layui-form-item">';
		    html+='<label class="layui-form-label">标题：</label>';
		    html+='<div class="layui-input-block">';
		      html+='<input type="text" data-value="title" name="user['+index+'].title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">';
		    html+='</div>';
		 html+='</div>';
		 html+='<div class="layui-form-item">';
		    html+='<label class="layui-form-label">作者：</label>';
		    html+='<div class="layui-input-block">';
		      html+='<input type="text" data-value="username" name="user['+index+'].username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">';
		    html+='</div>';
		  html+='</div>';
		 html+='<button onclick="del(this)">删除</button>';
    html+='</li>'; 
   $("#listUl").append(html);
   index ++;
 })

 //删除
function del(that){
    $(that).parent().remove();
 	var items=$(".ItemUl")
 	index=items.length;
    items.each(function (i) {
   	   var inputs =$(this).find("input");
   	   inputs.each(function () {
             var inp = $(this).data("value");
             $(this).attr("name", "user[" + i + "]." + inp);
        });
    })
 }
  
</script>