Chamar janela modal para diferentes

Gostaria de chamar a janela modal de acordo com o produto escolhido para ser excluído, eu ainda estou fazendo o front do projeto mas sei que é possível fazer isso só com javascript seria algo como chamar a janela modal de acordo com o id do produto que será trazido pelo banco de dados

CSS:

.modal-container{
 width: 100vw;
 height: 100vh;
 background: rgba(0, 0, 0, .5);
 position: fixed;
 top: 0px;
 left: 0px;
 z-index: 2000;
 display: none;
 justify-content: center;
 align-items: center;
 font-family: Arial, Helvetica, sans-serif;
 }
 .modal-container.mostrar{
 display: flex;
 }
 .modal-content{
 background: #fff;
 width: 30%;
 min-width: 300px;
 padding: 30px;
 border: 10px solid #988b7a;
 box-shadow: 0 0 0 10px #fff;
 position: relative;
 }
 .btn-question{
 color: #fff;
 border-radius: 8px;
 border: none;
 width: 120px;
 height: 60px;
 font-size: 18px;
 cursor: pointer;
 margin-left: 10%;
 transition: .8s;
 }
 .btn-yes{
 background-color: #4caf50;

 }
 .btn-yes:hover{
 background-color: #50dd55;
 }
 .btn-no{
 background-color:#db4437;
 }
 .btn-no:hover{
 background-color: #f53625;
 }

 @keyframes modal{
 from{
 opacity: 0;
 transform: translate3d(0, -60px, 0);
 }
 to{
 opacity: 1;
 transform: translate3d(0, 0, 0);
 }
 }

 .mostrar .modal-content{
 animation: modal .3s;
 }
 .fechar{
 position: absolute;
 top: 0px;
 right: 0px;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 border: 4px solid #fff;
 background: red;
 color: #fff;
 font-family: Arial, Helvetica, sans-serif;
 cursor: pointer;
 }

	HTML:

<table class="tabela-padrao" border="1px">
 <thead>
 <tr>
 <th>Produto</th>
 <th>Marca</th>
 <th>Quant</th>
 <th>Preço</th>
 <th>Excluir</th>
 </tr>

 </thead>
 <tbody>
 <tr>
 <td>Mouse</td>
 <td>Multilaser</td>
 <td>2</td>
 <td>50,00</td>
 <td><button id="botaoChama">Excluir Produto</button></td>
 </tr>

 <tr>
 <td>Teclado</td>
 <td>Multilaser</td>
 <td>2</td>
 <td>50,00</td>
 <td><button id="botaoChama">Excluir Produto</button></td>
 </tr>

 <tr>
 <td>Fone</td>
 <td>Multilaser</td>
 <td>2</td>
 <td>50,00</td>
 <td><button id="botaoChama">Excluir Produto</button></td>
 </tr>

 </tbody>
 </table>

 <div id="modal" class="modal-container">
 <div class="modal-content">
 <button class="fechar">X</button>
 <h2 class="subtitulo">Tem certeza que deseja excluir esse produto?</h2>
 <button class="btn-question btn-yes">Sim</button> <button class="btn-question btn-
 no">Não</button>
 </div>
 </div>

	JS:

function iniciaModal(modalID){
 const modal = document.getElementById(modalID);
 if(modal){
 modal.classList.add('mostrar');
 modal.addEventListener('click',(e)=>{
 if(e.target.id == modalID || e.target.className == 'fechar' || e.target.className == 'btn-question btn-no'){
 modal.classList.remove('mostrar');
 }
 });
 }

 }
 const botaoChama = document.querySelector('#botaoChama');
 botaoChama.addEventListener('click',()=>{
 iniciaModal("modal");
 });