Tic Tac Toe 2 Players Track if they Win

I have a question. I have to do a tic-tac-toe and now have the problem that I don't know how to do it in Javascript, that it recognizes who has won. Can somebody help me with it? Maybe with an array or just a few variables. How can I make it so that when I click on a field I can no longer click it?

let currentPlayer = "player1";      //player1 wird als erstes festgelegt

function handleClick(box) {
  if(currentPlayer === "player1"){  //wenn currentPlayer === player1
    erstes(box);                    //wird die funktion erstes(box) ausgeführt
    currentPlayer = "player2";      //und currentPlayer wird auf 2 gesetzt
  }else{
    zero(box);                      //wenn currentPlayer === player2 wird die funktion zero(box) ausgeführt                    
    currentPlayer = "player1";      //und currentPlayer wird wieder auf 1 gesetzt
  }
}
function erstes(box) {
  var x = box;                     
  if (x.innerHTML === " ")          //wenn in dem Button nichts steht
   {      
    x.innerHTML = "X";              //wird der button onclick auf X gestzt
    x.style.fontSize = "100px";     //das aussehen des X wird bestimmt
    x.style.fontFamily = "cursive";
  }
}
function zero(box) {
  var o = box;
  if (o.innerHTML === " ")          //wenn in dem Button nichts steht
   {
    o.innerHTML = "O";              //wird der button onclick auf O gestzt
    o.style.fontSize = "100px";     //das aussehen des O wird bestimmt
    o.style.fontFamily = "cursive";
  }
}

.Feld{
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    height: 600px;
}
.ueber{
    color: white;
}
body{
    
    max-width: 500px;
    margin: auto;
    margin-top: 5%;
    text-align: center;
    background-image: url("https://wallpaperaccess.com/full/569754.jpg"), url("https://wallpaperaccess.com/full/569754.jpg");
}

.Feld div{
    width: 200px;
    height: 200px;
    border-color: black;
}
.eins{
    width: 200px;
    height: 200px;
    border-color: white;
    border-top-left-radius: 10%;
    background-color: black;
    color: white;
    cursor: pointer; 
}
.zwei{
    width: 200px;
    height: 200px;
    border-color: white;
    background-color: black;
    color: white;
    cursor: pointer; 
}
.drei{
    width: 200px;
    height: 200px;
    border-color: white;
    border-top-right-radius: 10%;
    background-color: black;
    color: white;
    cursor: pointer; 
}
.vier{
    width: 200px;
    height: 200px;
    border-color: white;
    background-color: black;
    color: white;
    cursor: pointer; 
}

.fünf{
    width: 200px;
    height: 200px;
    border-color: white;
    background-color: black;
    color: white;
    cursor: pointer; 
}

.sechs{
    width: 200px;
    height: 200px;
    border-color: white;
    background-color: black;
    color: white;
    cursor: pointer; 
}

.sieben{
    width: 200px;
    height: 200px;
    border-color: white;
    border-bottom-left-radius: 10%;
    background-color: black;
    color: white;
    cursor: pointer; 
}

.acht{
    width: 200px;
    height: 200px;
    border-color: white;
    background-color: black;
    color: white;
    cursor: pointer; 
}

.neun{
    width: 200px;
    height: 200px;
    border-color: white;
    border-bottom-right-radius: 10%;
    background-color: black;
    color: white;
    cursor: pointer; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
    <title>TTT</title>
</head>
<body>

    <fieldset> <legend class="ueber">Tic Tac Toe</legend>

    <div class="Feld">
        <div><button class="eins" id="1" onclick="handleClick(this)"> </button></div>
        <div><button class="zwei" id="2" onclick="handleClick(this)"> </button></div>
        <div><button class="drei" id="3" onclick="handleClick(this)"> </button></div>
        <div><button class="vier" id="4" onclick="handleClick(this)"> </button></div>
        <div><button class="fünf" id="5" onclick="handleClick(this)"> </button></div>
        <div><button class="sechs" id="6" onclick="handleClick(this)"> </button></div>
        <div><button class="sieben" id="7" onclick="handleClick(this)"> </button></div>
        <div><button class="acht" id="8" onclick="handleClick(this)"> </button></div>
        <div><button class="neun" id="9" onclick="handleClick(this)"> </button></div>
    </div>
</fieldset>
</body>
</html>

Solution

You should have a crack at this yourself so I don't want to code an answer for you... but here are some of the pieces and the thinking.

You can check to see if a player has won immediately after they click for their turn, so at the end of the handleClick function.

A rough and ready way to do this would be to gather all of the "box" elements, then check all the rows, columns and diagonals.

Some of the pieces of this include:

Use the document.getElementById method to get the "box" elements into variables (ideally an array or map to make it easy to refer to the elements in a logical, rather than manual, way, but individual variables would work)
Test those variables for winning lines, so a crude example for testing one winning line would be (where box1, box2 and box3 were the box elements from the previous step, and processWin some function which did whatever was needed when a win happened):

if ( box1.innerHtml === "X" && box2.innerHtml === "X" && box3.innerHtml === "X" ) processWin()

Naturally this would all be much better if you can generalise the functions for both players (eg so instead of using "X" above, have a variable "activePlayerSymbol" which is set to either "O" or "X")