layer 放大点击的图片

存在两个问题：一是放大的图片如何在该界面存在多张，二是点击图片1，就弹出并放大图片1.点击2，弹出并放大图片。注：图片地址是遍历后台数据得到的，然后用jquery添加img标签显示。以下是我的代码，在此谢谢大家了：

那你每次点击就传新的img src就好了你看看我这个demo 把data里的url换成你的数据

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">

    </div>
</body>
<script src="./layer-v3.5.0/layer/mobile/layer.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    var data = [{
        url: "./img/img_1.png",
        name: "22"
    }, {
        url: "./img/img_2.png",
        name: "33"
    }]; //data数据

    for (let i = 0; i < data.length; i++) {
        var el = $(`<div><img  src="${data[i].url}"/>${data[i].name}</div>`);
        el.appendTo($('#box'));
        console.log(i,"999")
        $("#box").children().eq(i).on("click",function(){
            console.log(i,"00")
            layer.open({
                type: 1,
                area: ['600px', '360px'],
                shadeClose: true, //点击遮罩关闭
                content:`<img  src="${data[i].url}"/>`
            });
        })
        // //捕获页
        // $().on('click', function () {
        //     layer.open({
        //         type: 1,
        //         area: ['600px', '360px'],
        //         shadeClose: true, //点击遮罩关闭
        //         content:el
        //     });
        // });
    }
    
    

</script>

</html>