хотя бы так

уже лучше)

хотя тоже плохо

document.querySelectorAll('.box').forEach((item) => {
 item.addEventListener('onmouseover', () => {
   document.getElementById("text-ca").style.display = "block";
   document.getElementById("text-hover").style.display = "none";
 });
 item.addEventListener('onmouseout', () => {
   document.getElementById("text-ca").style.display = "none";
   document.getElementById("text-hover").style.display = "block";
 });
});

data-id чтоб понять че за элемент - оптимально

лучше data атрибут

можете раздать и id, только в цикле и добавляю текущую итерацию к id) типа #box-id-{тут уникальная цифра}

лучше data-атрибут, да)

как вы хотите чтоб браузер понял, куда вы ткнули и какой текст показать? он же привязан к определенной кнопке у вас

Тогда придется писать функцию для каждого объекта?

значит у кнопки должна быть уникальность

К классу .box

я кста давно не видел что бы id преписывали -_-

не делают так, но я решил мож дата-атрибуты чересчур сложно

обычно для input делается, чтобы лейбел работал

но это будет работат все ж

.

для какого объекта?

Для блока

раздайте всем класс