How to avoid Jshint (Functions declared within loops referencing an outer scoped variable may lead to confusing semantics)

Question

Hi lads I'm new to JavaScript and I'm in the process of creating my first web application and still don't know how to use jQuery. My question is about how to avoid Jshint warning. I added an event listener to multiple elements with the same class name the code works but when trying to validate my code through jshint I'm getting this error (Functions declared within loops referencing an outer scoped variable may lead to confusing semantics)

This is my html code for the first warning

 <div class="search-suggestion">
                    <div class="by-ingredient" onclick="writeToDocument('fish')">
                        <div class="suggestion-text">
                            <p>Fish</p>
                        </div>
                        <div class="suggestion-icon suggestion-before"><i class="icon fas fa-fish" aria-hidden="true"></i></div>
                    </div>
                    <div class="winter" onclick="writeToDocument('winter')">
                        <div class="suggestion-text">
                            <p>Winter</p>
                        </div>

                    <div class="suggestion-icon suggestion-before"><i class="icon far fa-snowflake" aria-hidden="true"></i></div>
                </div>

javaScript

for (let i = 0; i < suggestionIcon.length; i++) {
    icon[i].addEventListener('mouseenter', function () {
        suggestionIcon[i].classList.remove('suggestion-before');
        suggestionIcon[i].classList.add('suggestion-after');
    });
}

second warning html

<div id="subscribe-div" class="hide">
            <div class="subscribe-container">
                <div class="subscribe-header">
                    <h3>To Subscribe Please Fill The Form</h3>
                </div>
                <div class="subscribe-form">
                    <div id="closeSubscribe" class="close-subscribe">
                        <p class="remove">Close</p><i class="far fa-times-circle" aria-hidden="true"></i>
                    </div>
                    <form onsubmit="return sendMail(this);">
                        <input type="text" name="name" class="name-input" id="subscriberName" placeholder="Name"
                            required />
                        <input type="text" name="emailaddress" class="email-input" id="subscriberEmail"
                            placeholder="Email" required />
                        <button type="submit" class="subscribe-submit-btn">Submit</button>
                    </form>
                </div>
                <div id="subscribetUserMessage">
                </div>
            </div>
        </div>
        <div id="contact-div" class="hide">
            <div class="contact-container">
                <div class="contact-header">
                    <h3>Contact Us</h3>
                </div>
                <div class="conatct-form">
                    <div id="closeContact" class="close-contact">
                        <p class="remove">Close</p><i class="far fa-times-circle" aria-hidden="true"></i>
                    </div>
                    <form onsubmit="return sendMail(this);">
                        <input type="text" name="name" class="name-input" id="name" placeholder="Name" required />
                        <input type="text" name="emailaddress" class="email-input" id="emailAddress" placeholder="Email"
                            required />
                        <textarea name="message" class="message-form" id="message" placeholder="Message"
                            required></textarea>
                        <button type="submit" class="contact-submit-btn">Submit</button>
                    </form>
                </div>
                <div id="contactUserMessage">
                </div>
            </div>
        </div>

java script

for (let i = 0; i < openSubscribe.length; i++) {
    openSubscribe[i].addEventListener('click', function () {
        if(contactDiv.classList.contains('hide')){
        subscribe.classList.remove('hide');
        }else{
            alert("Please Close Contact Form");
        }
    });
}