结合layui实现无刷新添加和删除input输入框，自动生成不同name值

<div class="layui-form-item yf-input-del">
    <label class="layui-form-label">教育背景</label>
    <div class="layui-input-block" id="edu_bg">
        #//测试随机创建几个连续和不连续的子元素，真实场景下直接循环出你已有的子元素即可
        <div class="layui-input-inline">
            //input文本框
            <input type="text" name="edu_bg[5]" value="" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
            //删除按钮
            <i class="layui-icon deleteEduBg">&#x1006;</i>
        </div>
        <div class="layui-input-inline">
            <input type="text" name="edu_bg[6]" value="" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
            <i class="layui-icon deleteEduBg">&#x1006;</i>
        </div>
        <div class="layui-input-inline">
            <input type="text" name="edu_bg[9]" value="" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
            <i class="layui-icon deleteEduBg">&#x1006;</i>
        </div>
    </div>
</div>
<div class="layui-form-item" id="edu_bg_add">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
        <a href="javascript:;" class="layui-btn site-demo-active" onclick="insertInput()">
            <i class="layui-icon">&#xe654;</i> 新增1条教育背景
        </a>
    </div>
</div>

//引入layui.js
<script src="/layui/dist/layui.all.js"></script>
<script>
    var $ = layui.jquery; //引用layui内置的jQuery，也可以自己调用
    var key1=$("#edu_bg").children(".layui-input-inline").length;
    var FieldCount1=0;
    function insertInput() {
        //检索已有的input包含的name值
        var arr1=[];
        FieldCount1++;
        $("#edu_bg input[type='text']").each(function(){
            arr1.push($(this).attr('name'));
        });
        //console.log(arr1);
        //所有name加入数组arr1
        var div1 = $("<div></div>").addClass("layui-input-inline");
        //console.log(edu_bg[FieldCount1]);
        var newCount1="edu_bg["+FieldCount1+"]";
        //判断新生成的name值是否在已存在的数组中
        if($.inArray(newCount1, arr1) === -1){
            FieldCount1=FieldCount1;
            var input1 = "<input type='text' name='edu_bg["+FieldCount1 +"]' value='' autocomplete='off' placeholder='请输入' lay-verify='required' class='layui-input'>"
            var icon1 = "<i class='layui-icon deleteEduBg' onclick='deleteElement(this)'>&#x1006;</i>";
            div1.append(input1, icon1);
            $("#edu_bg").append(div1);  // 追加新元素
            key1++;
        }else{
            FieldCount1++;
            insertInput();
        }
    }
    $("body").on("click",".deleteEduBg", function(e){ //user click on remove text  
        if( key1 > 1 ) {  
            $(this).parent('div').remove(); //移除对应的父级div元素  
            key1--; //decrement textbox  
        }else{
            alert("请至少填写1条教育背景信息！");
            return false;  
        }
    }) 
</script>

<link rel="stylesheet" href="/layui/dist/css/layui.css">
<style type="text/css">
    /* 新增删除图标的样式 */
    .yf-input-del .layui-input-inline .layui-input {
        padding-right: 20px;
        margin-bottom: 10px;
    }
    .yf-input-del .layui-input-inline i.layui-icon {
        position: absolute;
        right: 2px;
        top: 8px;
        color: #999999;
    }
</style>