Переменная не определена, хотя в цикле была объявлена

Поискав инфу, мне кажется что-то со стеком вызовов связано. Вот код

const blinds_items = document.getElementsByClassName('blind');
const btn = document.querySelector('.btn_anim');
const blind = Array.from(blinds_items);

btn.onmouseover = ()=>{
    for(let i = 0; i <= blind.length; i++){
        blind[i].style.left += `10px`;
    }
}

Пишет в консоль, что blind[i] is undefined. Кстати, один раз цикл выполняется, потом выдаёт ошибку. Но, если я добавляю переменную j, которая никак к i вроде бы не относится, код работает:

const blinds_items = document.getElementsByClassName('blind');
const btn = document.querySelector('.btn_anim');
let blind = Array.from(blinds_items);
let j = 0;

btn.onmouseover = ()=>{
    for(let i = 0; i <= blind.length; i++){
        blind[i].style.left += j + 'px';
        j+=10;
    }
}

Что происходит, не могу понять

html:

<div class="btn_anim">
        <div class="bg"></div>
        <span>Animation</span>
        <div class="string"></div>
        <div class="blind" id="b1"></div>
        <div class="blind" id="b2"></div>
        <div class="blind" id="b3"></div>
        <div class="blind" id="b4"></div>
        <div class="blind" id="b5"></div>
        <div class="blind" id="b6"></div>
        <div class="blind" id="b7"></div>
        <div class="blind" id="b8"></div>
        <div class="blind" id="b9"></div>
        <div class="blind" id="b10"></div>
        <div class="blind" id="b11"></div>
        <div class="blind" id="b12"></div>
        <div class="blind" id="b13"></div>
        <div class="blind" id="b14"></div>
        <div class="blind" id="b15"></div>
        <div class="blind" id="b16"></div> 
        </div>
    </div>