I have a multiple select dropdown list.

<select name="YRsummaries" id="YRcollection" multiple>
<option value="">Please Select a Year</option>
<option value="/PDF/MCR0621.pdf"><a title="Fiscal Year 2021 &ndash; 2022">F.Y. 21</a></option>
<option value="/PDF/MCR0620.pdf"><a title=" Fiscal Year 2020 &ndash; 2021">F.Y. 20</a></option>
<option value="/PDF/MCR0619.pdf"><a title="Fiscal Year 2019 &ndash; 2020">F.Y. 19</a></option>
</select>
<button type="button" id="yrcollections" onclick="yrCall()"> Get Documents</button>

I am pushing all selected values to a js array. I have console logged the value and multiple comes but when it goes to execute the window.open it only does the first one.

here is the js code

function yrCall(){
const selected = document.querySelectorAll('#YRcollection option:checked');
const valuey = Array.from(selected).map(el => el.value);
for(var i = 0; valuey.length > i; i++){
var url = valuey[i];
console.log(url);
window.open(url, '_blank');
}}

any help would be appreciated.