ajax로 삭제기능 구현하기 질문입니다

<script>
    document.querySelectorAll('.delete')[0].addEventListener('click', () => {
        fetch('/abc?id=<%=글목록[0]._id%>', {
            method: 'DELETE',
        });
    });
    document.querySelectorAll('.delete')[1].addEventListener('click', () => {
        fetch('/abc?id=<%=글목록[1]._id%>', {
            method: 'DELETE',
        });
    });
    document.querySelectorAll('.delete')[2].addEventListener('click', () => {
        fetch('/abc?id=<%=글목록[2]._id%>', {
            method: 'DELETE',
        });
    });
</script>

위와 같은코드를 for를 사용해서 수정했더니 "i is not defined"라는 오류가 발생했습니다.

<script>
            for (let i = 0; i < '<%=글목록.length%>'; i++) {
                document.querySelectorAll('.delete')[i].addEventListener('click', () => {
                    fetch('/abc?id=<%=글목록[i]._id%>', {
                        method: 'DELETE',
                    });
                });
            }
        </script>

검색해봤더니 script 태그 안에서 생성한 let i는 ejs 템플릿의 글목록 배열에 접근할 수 없다고 합니다. 영상에서는 for로 축약할 수 있다고 하셨는데.. 그 힌트를 얻고 싶습니다.