Как повторно использовать JS-функцию в разных HTML-элементах

Ваша функция сохраняет первый квадрат в переменной с идентификатором cc.

Вместо этого вы должны передать ссылку на выбранный элемент и сохранить этот элемент в переменной. Таким образом, нажатый элемент будет переключен.

function myFunc(ref) {
   var element = document.getElementById(ref.id).innerHTML;
   element.classList.toggle("th");
}

Обратите внимание, что также необходимо добавить this к вызову функции.

Прежде всего, что более важно: id должен быть уникальным, поэтому он называется id (идентификатором).

Сказал, что я покажу вам два варианта решения вашего вопроса:

1. Лучший вариант:
Не добавляйте встроенный (прямо в HTML) слушатель onclick. Добавить общий класс для всех <th>, затем в Javascript добавьте одного слушателя к каждому элементу, имеющему класс, и используйте this внутри функции, поскольку область действия this будет элементом, по которому щелкнули мышью.

Пример:

let allTh = document.querySelectorAll(".clickableTh").forEach(x => x.onclick = myFunc)


function myFunc() {
   this.classList.toggle("th");
}

table, th, td {
   border:solid black 1px;     
   width:100px;
   height:100px;
}
.th {
  background-color:black;
}

<table>
  <tr>
    <th class = "clickableTh"></th>
    <th class = "clickableTh"></th>
    <th class = "clickableTh"></th>
    <th class = "clickableTh"></th>
    <th class = "clickableTh"></th>
    <th id = "cc" class = "notClickableTh"></th>
  </tr>
</table>

2. Сохранение вашей нынешней структуры:
Как сказано в комментариях, вы передаете this в качестве параметра (onclick = "myFunc(this)"), тогда внутри myFunc вам не нужно искать элемент, он у вас уже есть в качестве параметра.

Нажмите ниже, чтобы увидеть фрагмент кода примера

function myFunc(elem) {
   elem.classList.toggle("th");
}

table, th, td {
   border:solid black 1px;     
   width:100px;
   height:100px;
}
.th {
  background-color:black;
}

<table>
  <tr>
    <th onclick = "myFunc(this)"></th>
    <th onclick = "myFunc(this)"></th>
    <th onclick = "myFunc(this)"></th>
    <th onclick = "myFunc(this)"></th>
    <th onclick = "myFunc(this)"></th>
    <th id = "cc"></th>
  </tr>
</table>

Для уменьшения разметки вы можете привязать событие щелчка ко всем th.

var th = document.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
  th[i].addEventListener("click", function() {
    this.classList.toggle("th");
  });
}

th,
td {
  border: solid black 1px;
  width: 100px;
  height: 100px;
}

.th {
  background-color: black;
}

<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</table>