如何让div中的id里的内容自增？

现在有这么一个div

<div id="play_window"></div>

我想让这个div的id每次都自增，就像


<div id="play_window0"></div>，<div id="play_window1"></div>

这样，怎么实现啊

原生js 那就得 用 innerHtml 和for循环结合

<!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>
 let box=document.getElementById("box");
 let htmlStr="";
 for(var i=0;i<5;i++){
    htmlStr+=`<div id="play_window${i}">${i}</div>`
 };
 box.innerHTML=htmlStr;
</script>
</html>


<script>
        $(function(){
            for(let i=0;i<5;i++){
                $('body').append(`<div id="play_window${i}">${i}</div>`)
            }
        })
    </script>

举例用jQuery
统计外层div 里面的div个数

$(“#外层 div”).length 统计div个数
然后+1

假如是后端模板里面，那就直接循环多少次就多少个了

num ++

循环到指定的就不加了然后 html插入