layui动态添加多个input，可实现增加删除input，并回显值输出

    <form class="layui-form" id="premiumsAddRewardForm" lay-filter="premiumsAddRewardForm"

            style="padding: 10px 0 0 0;display: none">
            <div class="layui-form-item">
                <div class="layui-inline" id="details_p">
                    <div class="layui-inline" style="margin-bottom: 20px;">
                        <label class="layui-form-label">排名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="ranking" placeholder="请输入排名" class="layui-input ranking">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-bottom: 20px;">
                        <label class="layui-form-label">奖励</label>
                        <div class="layui-input-inline">
                            <input type="text" name="awardIntegral" placeholder="请输入奖励"
                                class="layui-input awardIntegral">
                        </div>
                        <!-- <button type="button" class="layui-btn" onclick="add_div()" id="add_link">+</button> -->
                    </div>
                    <div id="details" style="display:none;">
                        <!-- <div class="layui-inline" style="margin-bottom: 20px;">
                                    <label class="layui-form-label">排名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="ranking" disabled placeholder="请输入排名"
                                            class="layui-input ranking">
                                    </div>
                                </div>
                                <div class="layui-inline" style="margin-bottom: 20px;">
                                    <label class="layui-form-label">奖励</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="awardIntegral" placeholder="请输入奖励"
                                            class="layui-input awardIntegral">
                                    </div>
                                    <button class="layui-btn" onclick="del_div(this)">-</button>
                                </div>-->
                    </div>
                </div>
            </div>
        </form>

var detail_div =1
function add_div() {
        var e = document.getElementById("details");
        var div = document.createElement("div");
        div.className = "form-group";
        div.id = "details" + detail_div;
        // div.find('.ranking').val(2)
        var html = "<div class='layui-inline' style='margin-bottom: 20px;'><label class='layui-form-label'>排名</label>" +
            "<div class='layui-input-inline'><input type='text' value='" + (detail_div + 1) +
            "' name='ranking' disabled placeholder='请输入排名' class='layui-input ranking'></div></div>" +
            "<div class='layui-inline' style='margin-bottom: 20px;'><label class='layui-form-label'>奖励</label>" +
            "<div class='layui-input-inline'>" +
            "<input type='text' name='awardIntegral' placeholder='请输入奖励' class='layui-input awardIntegral'>" +
            "</div>" +
            "<button class='layui-btn' onclick='del_div(this)'>-</button>" +
            "</div>"
        // div.innerHTML = e.innerHTML;
        // console.log(div.childNodes[1].getElementsByClassName('.ranking'))
        div.innerHTML += html
        document.getElementById("details_p").appendChild(div);
        detail_div++;
    }

    function del_div(obj) {
        var did_id = obj.parentNode.parentNode.id;
        var did = did_id.substring(7);
        if (detail_div > 1) {
            var id = "details" + did.toString();
            var e = document.getElementById(id);
            // console.log({id})
            $(".ranking").each(function(ite, ind) {
                if (ite > 1) {
                    // console.log({ite})
                    $(this).val(ite);
                }
            })
            document.getElementById("details_p").removeChild(e);
            detail_div--;
        }
    }

//回显值
//obj代表接口返回的数据
//赋值个数
                for (var i = 0; i < obj.length - 1; i++) {
                    add_div()
                    // console.log({i})                    
                }
                obj.map((item, index) => {
                    $(".awardIntegral").each(function(ite, ind) {
                        // console.log({ite})
                        // console.log({ind})
                        // if (index == 0) $(this).val(obj[0].awardIntegral);
                        if (index == ite) $(this).val(item.awardIntegral);
                    })
                })
                obj.map((item, index) => {
                    $(".ranking").each(function(ite, ind) {
                        // if (index == 0) $(this).val(obj[0].ranking);
                        // if(index>1){
                        if (index == ite) $(this).val(item.ranking);
                        // }
                    })
                })

 

自行复制，直接运行看效果