Javascript - loop calls a function, how do I call a different HTML element by its ID every time the function is called

See more:

Javascript

Hello,

I have a function which does a number of things, to show you what's important for this question, see here:

function SIP(config) {
const videoSource  = document.getElementById('streamVideo');
}

I have a function above that takes a config file and creates a session with it, an plays a video file to that html ID. I have loop like so:

var config = '10000';

if (config) {
	while (config < 10011) {
      fetch('data/' + config + '.json')
        .then(response => response.json())
        .then(data => {
          window.app = new SIP(data);
          console.log('fetch config', config, data);
	      config++;
	      //var ifyes = true;
          return;
        }).catch(console.error);
    }

What I want to happen is every time the loop is iterated over, it instead plays the video file in an incremented ID so it plays in not the same HTML element as the first iteration but the next ID (in this case, streamVideo2).

What I have tried:

A number of things, a do/while loop and I have tried building another file with variables relating to the ID of the HTML elements I'm trying to play a video to, the issue is that the function wants to always play to streamVideo and without changing the function manually I cannot play to another HTML element - there must be a way to do this