Problemas propuestos

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>

<body>
  <input type="button" id="boton1" value="Asociar clase">
  <input type="button" id="boton2" value="Desasociar clase">
  <table>
    <caption>
      cantidad de lluvia caida en mm.
    </caption>
    <thead>
      <tr>
        <th>Provincia</th>
        <th>Enero</th>
        <th>Febrero</th>
        <th>Marzo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Córdoba</th>
        <td>210</td>
        <td>170</td>
        <td>120</td>
      </tr>
      <tr>
        <th>Buenos Aires</th>
        <td>250</td>
        <td>190</td>
        <td>140</td>
      </tr>
      <tr>
        <th>Santa Fe</th>
        <td>175</td>
        <td>140</td>
        <td>120</td>
      </tr>
    </tbody>
  </table>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#boton1");
  x.click(asociarClase);
  x = $("#boton2");
  x.click(desasociarClase);
}

function asociarClase() {
  let x = $("th");
  x.addClass("titulo");
  x = $("td");
  x.addClass("cuerpo");
}

function desasociarClase() {
  let x = $("th");
  x.removeClass("titulo");
  x = $("td");
  x.removeClass("cuerpo");
}

.titulo
{
  font-family:arial;
  font-weight: normal;
  background-color: #6495ed;
  color:#ff0;
}

.cuerpo {
  border: 1px solid #000;
  padding: .5em;
  background-color:#ed8f63;
  width:100px;
  text-align:center;
}

9 - Métodos addClass y removeClass.

Problema:

Retornar