data-num=""中的后台返回的数值为什么它只取第一组

今天在做一个新项目页面,需要用到一个评分功能。
后台会返回一个数值,然后前端需要拿到这个数值对其进行处理。
如果后台返回的数值是1,那么前端需要显示1星的图片,
如果后台返回的数值是2,那么前端需要显示2星的图片,
下面是我的做法,但是永远只取第一个div下面的data-num数值,无法做到多个调用显示不同的图片。
不知道怎么写,求帮忙

<div>
        <div data-num="1" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>
    <div>
        <div data-num="3" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>
    <div>
        <div data-num="1" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>

$(document).ready(function(){
    var   num = parseFloat($('.hotnumber').attr('data-num'));
            if(num>=1&&num<2) {
                $('.setimg').attr('src','/img/hot-01.png')
            } else if (num>=2&&num<3) {
                $('.setimg').attr('src','/img/hot-02.png')
            } else if (num>=3&&num<4) {
                $('.setimg').attr('src','/img/hot-03.png')
            }
});

<div>
        <div data-num="1" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>
    <div>
        <div data-num="3" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>
    <div>
        <div data-num="1" class="hotnumber"></div>
        <img id="" class="setimg" src="" alt="">
    </div>
 
    <script>
        $(document).ready(function(){
            $.each($('.hotnumber'),function(index, item){
                const num = $(this).attr('data-num')
                $(this).siblings('.setimg').attr('src','/img/hot-0'+num+'.png')
                console.log(num)
            })
        });

    </script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    </head>
    <body>
        <div>
                <div data-num="1" class="hotnumber"></div>
                <img id="" class="setimg" src="" alt="">
            </div>
            <div>
                <div data-num="3" class="hotnumber"></div>
                <img id="" class="setimg" src="" alt="">
            </div>
            <div>
                <div data-num="1" class="hotnumber"></div>
                <img id="" class="setimg" src="" alt="">
            </div>
    </body>
    <script type="text/javascript">
        $(document).ready(function(){
            $.each($('.hotnumber'),(index, e) => {
                console.log($(e).attr('data-num'))
                var num = parseFloat($(e).attr('data-num'));
                if(num>=1&&num<2) {
                    $('.setimg').attr('src','/img/hot-01.png')
                } else if (num>=2&&num<3) {
                    $('.setimg').attr('src','/img/hot-02.png')
                } else if (num>=3&&num<4) {
                    $('.setimg').attr('src','/img/hot-03.png')
                }
            })
        });
    </script>
</html>