Preview de multiplos arquivos com inputs diferentes

Opa galera. Fiz um preview de imagens através de um input e ele está funcionado bem agora como eu faço para fazer uma mesmo preview em inputs diferentes. Quando coloco mais de um input e seleciona arquivos ele sempre mostra no primeiro input.

Meu codigo:

CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    font-family: "Rubik",sans-serif;

}

body{

    background-color: #f5f8ff;

}

.container{

    background-color: #ffffff;

    width: 60%;

    min-width: 450px;

    position: relative;

    margin:  50px auto;

    padding: 50px 20px;

    border-radius: 7px;

    box-shadow: 0 20px 35px rgba(0,0,0,0.05);

}

input[type="file"]{

    display: none;

}

label{

    display: block;

    position: relative;

    background-color: #025bee;

    color: #ffffff;

    font-size: 18px;

    text-align: center;

    width: 300px;

    padding: 18px 0;

    margin: auto;

    border-radius: 5px;

    cursor: pointer;

}

.container p{

    text-align: center;

    margin: 20px 0 30px 0;

}

#images{

    width: 80%;

    position: relative;

    margin: auto;

    display: flex;

    justify-content: space-evenly;

    gap: 20px;

    flex-wrap: wrap;

}

figure{

    width: 45%;

}

img{

    width: 100%;

}

figcaption{

    text-align: center;

    font-size: 2.4vmin;

    margin-top: 0.5vmin;

}

	 

	HTML:

   <div class="container">

        <input type="file" id="file-input" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple>

        <label for="file-input">

            <i class="fas fa-upload"></i>   Escolha seus arquivos

        </label>

        <p id="num-of-files">Nenhum arquivo escolhido</p>

        <div id="images"></div>

    </div>

    <div class="container">

        <input type="file" id="file-input" title="2" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple>

        <label for="file-input">

            <i class="fas fa-upload"></i>   Escolha seus arquivos

        </label>

        <p id="num-of-files">Nenhum arquivo escolhido</p>

        <div id="images"></div>

    </div>

	 

	JAVASCRIPT:

let fileInput = document.getElementById("file-input");

let inputFile = document.querySelectorAll("#file-input");

let imageContainer = document.getElementById("images");

let numOfFiles = document.getElementById("num-of-files");

function preview(input){

    imageContainer.innerHTML = "";

    numOfFiles.textContent = `${fileInput.files.length} Arquivos selecionados`;

   

   

    for(i of fileInput.files){

        let reader = new FileReader();

        let figure = document.createElement("figure");

        let figCap = document.createElement("figcaption");

        figCap.innerText = i.name;

        figure.appendChild(figCap);

        reader.onload=()=>{

            let img = document.createElement("img");

            if(figCap.innerText.split('.').pop() == 'pdf'){

                img.setAttribute("src","pdf.png");

            }else{

                img.setAttribute("src",reader.result);

            }

            figure.insertBefore(img,figCap);

        }

        imageContainer.appendChild(figure);

        reader.readAsDataURL(i);

    }

}