Uncaught TypeError: ...fadeIn is not a function?

Question

JavaScript

Good evening!
There is an image gallery (not a slider), when you click on one of the images, an enlarged one with an overlay should appear. Throws an error:
Uncaught TypeError: overlays[$(...).index(...)].fadeIn is not a function
at HTMLDivElement. ((index):217)
at HTMLDivElement.dispatch (jquery-2.2.4.min.js:3)
at HTMLDivElement.r.handle (jquery-2.2.4.min.js:3)
HTML overlays and gallery code:

<div class="overlays">
    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/1.jpg" alt="1">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/2.jpg" alt="2">
    </div>
    
    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/3.jpg" class="vertical" alt="3">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/4.jpg" class="vertical" alt="4">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/5.jpg" alt="5">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/6.jpg" alt="6">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/7.jpg" alt="7">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/8.jpg" class="vertical" alt="8">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/9.jpg" alt="9">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/10.jpg" class="vertical" alt="10">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/11.jpg" class="vertical" alt="11">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/12.jpg" class="vertical" alt="12">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/13.jpg" class="vertical" alt="13">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/14.jpg" class="vertical" alt="14">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/15.jpg" alt="15">
    </div>

    <div class="overlay">
      <div class="close">&times;</div>
      <img src="img/16.jpg" alt="16">
    </div>
  </div>


  <div class="gallery">
    <div class="gallery-item">
      <img src="img/1.jpg" alt="1">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/2.jpg" alt="2">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/3.jpg" class="vertical" alt="3">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/4.jpg" class="vertical" alt="4">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/5.jpg" alt="5">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/6.jpg" alt="6">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/7.jpg" alt="7">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/8.jpg" class="vertical" alt="8">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/9.jpg" alt="9">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/10.jpg" class="vertical" alt="10">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/11.jpg" class="vertical" alt="11">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/12.jpg" class="vertical" alt="12">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/13.jpg" class="vertical" alt="13">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/14.jpg" alt="14">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/15.jpg" alt="15">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/16.jpg" alt="16">
      <div class="gallery-item__cover">
        <i class="fa fa-search"></i>
      </div>
    </div>

  </div>

js code (jquery):

$(window).load(function(){

      let overlays = document.querySelectorAll('.overlays .overlay')

      $('.close').click(function(){
        $('.overlay').fadeOut()
      })
    
      $('.gallery-item').click(function(){
        overlays[$(this).index()].fadeIn()
      })
      
    })

What is this error?

Answer 1

$(window).load(function(){
  /* В этой строке overlays у тебя будет NodeList (не jQ объект) */
  let overlays = document.querySelectorAll('.overlays .overlay')

  $('.close').click(function(){
    $('.overlay').fadeOut()
  })

  $('.gallery-item').click(function(){
    /* Тут у Node пытаешься вызвать jQ метод, которого соответственно нет */
    // overlays[$(this).index()].fadeIn()

    // Пробуй что-то такое
    let i = $(this).index()
    $(overlays[i]).fadeIn()

  })
})

Answer 2

So the problem will be solved?
let overlays = $('.overlays .overlay');