带序号的操作（增、删）

<div>
@foreach($data->foretells as $k => $v)
   <div class="color_box_{{$k+1}}">
    <input type="hidden" class="flag" name="flag" value="{{$flag}}">
    <div class="table-responsive">
	<table>
    <tbody>
       <tr>
           <td class="show_index" style="width:47px;">{{ $v->key_index }}</td>
             <input type="hidden" class="key_index_{{$k+1}}" name="key_index[]" value="{{ $v->key_index }}">

	   @if($flag != 2)
           	<td style="width:70px;">
               	    <button type="button" name="{{ $k+1 }}" id="{{ $v->id }}" class="btn btn-primary submit save_pred_stroe" value="1" >提交</button>
                </td>
                <td style="width:70px;">
                     <a class="btn btn-danger" id="{{ $k+1 }}" name="{{ $v->id }}" onclick="delete_box(this)">删除</a>
                </td>
           @else
		<td style="width:70px;">
                     <a class="btn btn-danger" id="{{ $k+1 }}" onclick="delete_box(this)">删除</a>
                </td>
           @endif
       </tr>
   	</tbody>
	</table>
	</div>
</div>	
@endforeach
</div>


<div class="color_append_box">
                                        
</div>
<div style="height:250px;"></div>

<div class="box-footer">
   <div class="col-md-8">
       <div class="btn-group pull-left" style="margin-right: 10px">
            <a class="btn btn-success add_color" onclick="add_color()">增加批次</a>
       </div>
       <div class="btn-group pull-left" style="margin-right: 10px">
           <button type="submit" class="btn btn-primary submit" value="1" >提交</button>
       </div>
       <div class="btn-group pull-left"  style="margin-right: 10px">
            <a href="javascript:history.go(-1)" class="btn btn-primary">返回</a>
       </div>
   </div>
</div>


 {{-- TODO 统一模板 --}}
 <template class="extra-tpl">
     <div class="color_box___LA_KEY__" style="padding:0px 15px;margin-top:-10px;">
         <table class="table">
             <tbody>
                 <tr>
                     <td class="show_index" style="width:47px;" ></td>
                        <input type="hidden" name="key_index[]" class="key_index___LA_KEY__" value="__LA_KEY__">      
		 </tr>
            </tbody>
        </table>
    </div>
 </template>

<script>
        // TODO 增加批次
        var index = {!! $data->foretells !!};
        index = index.length;

        var tpl = $('template.extra-tpl');
        // TODO 色组盒子
        function add_color() {
            index++;
            var key = index;
            // TODO 基础模板
            var template = tpl.html().replace(/__LA_KEY__/g, key);

            // 显示序号用的（假显示）
            var show_lengt = $(".show_index").length + 1;
            $('.color_append_box').append(template)




	    // 显示序号用的（假显示）
            $(".show_index:eq("+(show_lengt-1)+")").text(show_lengt)
	    var data = {
                    '_token'        : LA.token,
           
                    'key_index'     : [$(".order_date_"+index).parent().siblings().find(".show_index")['prevObject'][0]['innerText']],
           
                };
                $.ajax({
                    url: "/admin/predict/add_pred_stroe",
                    type: "post",
                    data:data,
                    dataType:'json',
                    success: function (res) {
                        if (res.code == 1) {
                            $(".order_date_"+index).parent().siblings().find(".show_index")['prevObject'][12].getElementsByTagName("a")[0]['name'] = res.data
                            sweetAlert(res.msg);
                        }else{
                            sweetAlert(res.msg);
                        }
                    }
                });
            })
        }



	// TODO 删除盒子
        function delete_box(e) {
            if ($(e).attr("name") != undefined) {
                // 说明是成功的单子
                swal({
                    title: "确认删除?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确认",
                    showLoaderOnConfirm: true,
                    cancelButtonText: "取消",
                    preConfirm: function() {
                        return new Promise(function(resolve) {
                            $.ajax({                      
                                method: 'post',
                                url: '/admin/predict/delete_pred',
                                data: {
                                    id:$(e).attr("name"),
                                    _token:LA.token,
                                },
                                success: function (data) {
                                    if (data.code == 1) {
                                        swal(data.msg, '', 'success');
                                        $('.color_box_'+$(e).attr("id")).remove();
                                        $(".show_index").each(function(i){
                                            $(".show_index:eq("+i+")").text(i+1)
                                        })
                                    }else{
                                        swal(data.msg, '', 'error');
                                    }
                                }
                            });
                        });
                    }
                }).then(function(result) {
                    var data = result.value;
                    if (typeof data === 'object') {
                        if (data.code == 1) {
                            swal(data.msg, '', 'success');
                        } else {
                            swal(data.msg, '', 'error');
                        }
                    }
                });
            }else{
                $('.color_box_'+$(e).attr("id")).remove();
                $(".show_index").each(function(i){
                    $(".show_index:eq("+i+")").text(i+1)
                })
            }
        }