How do I add event listeners to every element with the same class using jquery

Question

I cannot understand why my code is not working. I am working on a popup modal when clicked. What is the right way to make it work? Thanks.

HTML

            <div class="projects-container">

                <a class="project">
                    <div class="img-wrapper">
                        <img src="./images/background-project-filler.png" alt="">
                    </div>
                    <p class = 'project-title'>Lorem Ipsum</p>
                </a>

                <a class="project">
                    <div class="img-wrapper">
                        <img src="./images/background-project-filler.png" alt="">
                    </div>
                    <p class = 'project-title'>Lorem Ipsum</p>
                </a>

                <a class="project">
                    <div class="img-wrapper">
                        <img src="./images/background-project-filler.png" alt="">
                    </div>
                    <p class = 'project-title'>Lorem Ipsum</p>
                </a>

                <a class="project">
                    <div class="img-wrapper">
                        <img src="./images/background-project-filler.png" alt="">
                    </div>
                    <p class = 'project-title'>Lorem Ipsum</p>
                </a>

            </div>

Jquery

        $('.project').each( (i) => {
            $('project')[i].click( () => {
                console.log(`Project ${i}`);
                
            });
        })

Answer 1

You missed dot inside each function: change project to .project.