请问怎么让这个上下移动左边的数字保持按顺序显示？

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
    .zdbz-shuru {
        float: left;
        width: 100%;
        background: #fff;
    }

    .zdbz-num {
        float: left;
        width: 100%;
        padding: .3rem;
        box-sizing: border-box;
    }

    .zdbz-num-left {
        display: inline-block;
        vertical-align: top;
        width: 1.5rem;
        height: 1.5rem;
        margin-right: .2rem;
        color: #d4a519;
        font-weight: bold;
        text-align: center;
        line-height: 1.5rem;
        background: #fff4cd;
        border: 1px solid #5a5853;
        border-radius: 99999px;
    }

    .zdbz-num-right {
        display: inline-block;
        vertical-align: top;
        width: 87%;
    }

    .zdbz-num-right p {
        line-height: 1.5rem;
        margin: 0;
    }

    .zdbz-link {
        position: relative;
        float: left;
        width: 100%;
        margin-top: .2rem;
    }

    .zdbz-link input {
        display: inline-block;
        vertical-align: middle;
        height: 1.8rem;
        padding: 0 .2rem;
        border: 1px solid #d4a519;
        border-radius: .5rem;
        -webkit-appearance: none;
        appearance: none;
    }

    .zdbz-link img {
        max-width: 50%;
    }

    .zdbz-link a {
        display: inline-block;
        vertical-align: middle;
        margin-right: 1.3rem;
        padding: .5rem 1rem;
        font-size: .33rem;
        color: #d4a519;
        background: #fff4cd;
        border-radius: .5rem;
    }

    .zdbz-red {
        color: #fff !important;
        background: #d4a519 !important;
    }

    .zdbz-btn {
        float: left;
        width: 100%;
        padding: 0 .6rem;
        box-sizing: border-box;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #aaa;
    }

    .zdbz-btn a {
        float: left;
        display: block;
        width: 22%;
        padding: .2rem 0;
        font-size: .32rem;
        color: #333;
    }

    .zdbz-btn a img {
        display: inline-block;
        vertical-align: middle;
        width: .4rem;
        height: .4rem;
        margin-right: .1rem;
    }

    .zdbz-btn a span {
        display: inline-block;
        vertical-align: middle;
    }

    .shuru-model {
        z-index: 1001;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .model-main {
        z-index: 5001;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        background: #fff;
        border-radius: .2rem;
        box-sizing: border-box;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .model-mainbox {
        padding: .2rem .2rem 0;
    }

    .model-main h3 {
        font-size: .3rem;
        font-weight: normal;
    }

    .model-main h1 {
        text-align: center;
        font-size: .35rem;
        font-weight: normal;
    }

    .model-main textarea {
        width: 100%;
        height: 1.5rem;
        padding: .2rem;
        line-height: .3rem;
        box-sizing: border-box;
        background: #f7f7f7;
        border: 0;
        border-radius: .1rem;
    }

    .model-main input {
        width: 100%;
        height: 1.8rem;
        padding: .2rem;
        border: 0;
        box-sizing: border-box;
        background: #f7f7f7;
        border: 0;
        border-radius: .5rem;
    }

    .model-btn {
        float: left;
        width: 100%;
        margin-top: .2rem;
    }

    .model-btn a {
        position: relative;
        float: left;
        display: block;
        width: 50%;
        padding: .5rem 0;
        font-size: .3rem;
        color: #999;
        text-align: center;
    }

    .model-btn a:nth-of-type(2):before {
        content: "";
        position: absolute;
        left: 0;
        top: 25%;
        width: 2px;
        height: 50%;
        background: #efefef;
    }

    .model_btna {
        color: red !important;
    }

    .mask_h3 {
        display: inline-block;
        vertical-align: top;
    }

    .mask_label {
        display: inline-block;
        vertical-align: top;
        position: relative;
        width: 2rem;
        height: 2rem;
        margin: .3rem 0 0 .3rem;
        background: #eee url(../img/icon-paizhao.png) center no-repeat;
    }

    .mask_label label {
        display: block;
        width: 100%;
        height: 100%;
        background: #eee url(../img/icon-paizhao.png) center no-repeat;
    }

    .mask_label input {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .body-publish-main {
        position: fixed;
        width: 100%;
        height: 100vh;
        overflow-y: auto;
    }

    .body-publish-main .checkbox input[type="checkbox"],
    .body-publish-main .checkbox input[type="radio"] {
        opacity: 0;
        z-index: 1;
        position: fixed;
        top: auto;
        left: auto
    }
</style>

</head>

<body>

<div class="zuodan-buzhou">
    <div class="zdbz-shuru">
        <div class="zdbz-num">
            <span class="zdbz-num-left">1</span>
            <div class="zdbz-num-right">
                <p>输入网址输入网址输入网址输入网址输入网址输入网址输入网址输入网址输入网址输入网址输入网址输入网址</p>
                <div class="zdbz-link">
                    <a class="zdbz-red" href="javascript:;">打开链接</a>
                    <a href="javascript:;">复制链接</a>
                </div>
            </div>
        </div>
        <div class="zdbz-btn">
            <a href="javascript:;"><img src="img/icon-shanchu.png" alt="" /><span>删除</span></a>
            <a class="sort-down" href="javascript:;"><img src="img/icon-xiayi.png" alt="" /><span>下移</span></a>
            <a class="sort-asc" href="javascript:;"><img src="img/icon-shangyi.png" alt="" /><span>上移</span></a>
            <a href="javascript:;"><img src="img/icon-bianji.png" alt="" /><span>编辑</span></a>
        </div>
    </div>
    <div class="zdbz-shuru">
        <div class="zdbz-num">
            <span class="zdbz-num-left">2</span>
            <div class="zdbz-num-right">
                <p>二维码二维码二维码二维码二维码二维码二维码二维码二维码</p>
                <div class="zdbz-link">
                    <img src="img/HTB1lP1rb21H3KVjSZFHq6zKppXaO.jpg" alt="" />
                </div>
            </div>
        </div>
        <div class="zdbz-btn">
            <a href="javascript:;"><img src="img/icon-shanchu.png" alt="" /><span>删除</span></a>
            <a class="sort-down" href="javascript:;"><img src="img/icon-xiayi.png" alt="" /><span>下移</span></a>
            <a class="sort-asc" href="javascript:;"><img src="img/icon-shangyi.png" alt="" /><span>上移</span></a>
            <a href="javascript:;"><img src="img/icon-bianji.png" alt="" /><span>编辑</span></a>
        </div>
    </div>
    <div class="zdbz-shuru">
        <div class="zdbz-num">
            <span class="zdbz-num-left">3</span>
            <div class="zdbz-num-right">
                <p>复制数据复制数据复制数据复制数据复制数据复制数据复制数据复制数据</p>
                <div class="zdbz-link">
                    <input type="text" value="SDFSDHOHO" disabled="disabled">
                    <a class="zdbz-red" href="javascript:;">复制数据</a>
                </div>
            </div>
        </div>
        <div class="zdbz-btn">
            <a href="javascript:;"><img src="img/icon-shanchu.png" alt="" /><span>删除</span></a>
            <a class="sort-down" href="javascript:;"><img src="img/icon-xiayi.png" alt="" /><span>下移</span></a>
            <a class="sort-asc" href="javascript:;"><img src="img/icon-shangyi.png" alt="" /><span>上移</span></a>
            <a href="javascript:;"><img src="img/icon-bianji.png" alt="" /><span>编辑</span></a>
        </div>
    </div>
</div>
<script>
    // 上移下移
    $(".zuodan-buzhou").on('click', '.sort-down', function () {
        //判断是否有下一个节点
        if ($(this).parents('.zdbz-shuru').next().length > 0) {
            $(this).parents('.zdbz-shuru').next().after(
                $(this).parents('.zdbz-shuru').prop('outerHTML'));
            $(this).parents('.zdbz-shuru').remove();
        }
    }).on('click', '.sort-asc', function () {
        //判断是否有上一个节点
        if ($(this).parents('.zdbz-shuru').prev().length > 0) {
            $(this).parents('.zdbz-shuru').prev().before(
                $(this).parents('.zdbz-shuru').prop('outerHTML'));
            $(this).parents('.zdbz-shuru').remove();
        }
    })
</script>

</body>

</html>

学艺不精哎，自己处理好了

// 初始化左侧数字

    let forNum=function(){
        for (let i = 0; i < $(".zdbz-num-left").length; i++) {
            $(".zuodan-buzhou").find(".zdbz-num-left").eq(i).html(i + 1);
        }
    }
    // 上移下移
    $(".zuodan-buzhou").on('click', '.sort-down', function () {
        //判断是否有下一个节点
        if ($(this).parents('.zdbz-shuru').next().length > 0) {
            $(this).parents('.zdbz-shuru').next().after(
                $(this).parents('.zdbz-shuru').prop('outerHTML'));
            $(this).parents('.zdbz-shuru').remove();
        }
        forNum();
    }).on('click', '.sort-asc', function () {
        //判断是否有上一个节点
        if ($(this).parents('.zdbz-shuru').prev().length > 0) {
            $(this).parents('.zdbz-shuru').prev().before(
                $(this).parents('.zdbz-shuru').prop('outerHTML'));
            $(this).parents('.zdbz-shuru').remove();
        }
        forNum();
    })

请问怎么让这个上下移动左边的数字保持按顺序显示？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？