如何为同一页面上的不同输入和文本设置动态字符计数器，每个输入和文本的最大长度不同？

<input type="text" id="input1">
<textarea id="textarea1"></textarea>

function updateCharacterCount(elementId, maxLength) {
  var element = document.getElementById(elementId);
  var count = element.value.length;
  var counterElement = document.getElementById(elementId + "-counter");
  
  counterElement.innerText = count + "/" + maxLength;
}

// 监听输入框的变化事件
document.getElementById("input1").addEventListener("input", function() {
  updateCharacterCount("input1", 20); // 设置最大长度为20
});

// 监听文本区域的变化事件
document.getElementById("textarea1").addEventListener("input", function() {
  updateCharacterCount("textarea1", 50); // 设置最大长度为50
});

<input type="text" id="input1">
<span id="input1-counter"></span>

<textarea id="textarea1"></textarea>
<span id="textarea1-counter"></span>

span {
  color: gray;
}