我如何使用这个javascript在8个不同ID的不同模态上工作，而不需要对每个按钮重复相同的代码？

<button class="modal-btn" data-target="modal1">打开模态框1</button>
<button class="modal-btn" data-target="modal2">打开模态框2</button>
<!-- 其他模态框按钮... -->

<div id="modal1" class="modal">模态框1内容</div>
<div id="modal2" class="modal">模态框2内容</div>
<!-- 其他模态框... -->

// 选择所有的模态框按钮
var modalBtns = document.querySelectorAll('.modal-btn');

// 为每个按钮添加事件处理程序
modalBtns.forEach(function(btn) {
  btn.addEventListener('click', function() {
    // 获取目标模态框的ID
    var targetModalId = this.getAttribute('data-target');
    
    // 根据ID获取目标模态框元素
    var targetModal = document.getElementById(targetModalId);
    
    // 执行特定于每个模态框的操作
    // ...
    
    // 显示目标模态框
    targetModal.style.display = 'block';
  });
});