Tic Tac Toe in JavaScript (+ jQuery)
Congrats on building this game, it's pretty cool!
I just have a few suggestions for you:


Don't use jQuery. You really don't need it for anything. The native versions of finding elements in your DOM are much faster than jQuery's methods, and you don't have to load a library.
Don't append HTML as strings. Instead, create dom elements. Then you can add id's, classes and event handlers without querying for them in the DOM.
Put CSS rules in a CSS file, and use javascript only to add and remove CSS classes from elements.


Let me try to rewrite this function following my own rules:

function generateFields() {
  var y = 1;
  var top = 50;
  for (var i = 0; i &lt; 9; i++) {
    var x = $("#board").append(
      "&lt;div class='field hover-field' id='" + "nr" + i + "'&gt;&lt;/div&gt;"
    );
    var fieldI = $("#nr" + i);

    if (i == 0 || i == 3 || i == 6) {
      fieldI.css("margin-left", "5px");
    }
    if (i &gt;= 3 &amp;&amp; i &lt;= 8) {
      fieldI.css("margin-top", "15px");
    }

    fieldI.click(chooseField);
  }
}


Could become:

function generateFields() {
  let y = 1;
  let top = 50;
  let board = document.querySelector("board");
  for (var i = 0; i &lt; 9; i++) {
    let field = document.createElement("div");
    board.appendChild(field);
    field.classList.add("field hover-field");
    field.id = "nr"+i;
    if (i == 0 || i == 3 || i == 6) {
      field.addClass("marginLeft");
    }
    if (i &gt;= 3 &amp;&amp; i &lt;= 8) {
      field.addClass("marginTop");
    }
    field.addEventListener("click", chooseField);
  }
}


CSS

   .marginLeft {
      margin-left: 5px;
   }
   .marginTop {
      margin-top: 15px;
   }


There's more to improve, but hopefully these tips are helpful!