When I try to create a simple alert by using document.querySelector('.custom'), my code functions properly and returns the dataset of first img but doesn't for the other line(s) although I change the JS into document.querySelectorAll('.custom')
I'm sure it's kids' stuff for most but I couldn't find the solution though. Thanks in advance for your help.
const custom = document.querySelectorAll('.custom');
custom.addEventListener('click', function() {
alert(`Welcome ${custom.dataset.name} ${custom.dataset.last}`);
});<div class="item">
<img data-name="name 1" data-last="last 1" class="custom" src="https://source.unsplash.com/random/300x300" />
<img data-name="name 2" data-last="last 2" class="custom" src="https://source.unsplash.com/random/300x300" />
<p>Hi I'm a item</p>
</div>