JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<input type="text" class="form-control mb-2 mr-sm-2" name="m" id="m" placeholder="Mundlich">
                <input type="text" class="form-control mb-2 mr-sm-2" name="s" id="s" placeholder="Schriftlich">
                <input type="text" class="form-control mb-2 mr-sm-2" name="g" id="g" placeholder="Gesamt">

<table class="table table-hover table-bordered">
  <thead>
    <tr>
      <th id="NUM">#</th>
      <th id="A">A</th>
      <th id="B">B</th>
      <th id="C">C</th>
      <th id="D">D</th>
      <th id="E">E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="1">1</th>
      <td id="A1" onclick="selecionaCelula(this.id)">A1</td>
      <td id="B1" onclick="selecionaCelula(this.id)">B1</td>
      <td id="C1" onclick="selecionaCelula(this.id)">C1</td>
      <td id="D1" onclick="selecionaCelula(this.id)">D1</td>
      <td id="E1" onclick="selecionaCelula(this.id)">E1</td>
    </tr>
    <tr>
      <th id="2">2</th>
      <td id="A2" onclick="selecionaCelula(this.id)">A2</td>
      <td id="B2" onclick="selecionaCelula(this.id)">B2</td>
      <td id="C2" onclick="selecionaCelula(this.id)">C2</td>
      <td id="D2" onclick="selecionaCelula(this.id)">D2</td>
      <td id="E2" onclick="selecionaCelula(this.id)">E2</td>
    </tr>
  </tbody>
</table>

CSS

td {
  cursor: pointer;
}

JavaScript

function selecionaCelula(id) {
	var celula = $('#' + id).text();
  var linha = $('#' + id.substring(1, id.length)).text();
  var coluna = $('#' + id.substring(1, 0)).text();  
  $('#g').val(celula);
  $('#m').val(linha);
  $('#s').val(coluna);
}