If statement keeps showing the same result - JQuery

I am trying to make a game that switches the player's turn every click in a certain area. Here is the code:

$(function() {
  var turn = 2;

  if (turn == 1) {
    $(".box").on("click", function() {
      var $thisBox = $(this).children();
      $thisBox.addClass("x").animate({
        opacity: 1
      }, 1000);
    });
    turn = 2;
  } else if (turn == 2) {
    $(".box").on("click", function() {
      var $thisBox = $(this).children();
      $thisBox.addClass("o").animate({
        opacity: 1
      }, 1000);
    });
    turn = 1;
  } else {
    document.write("Uh Oh");
  }
});

This keeps performing the actions in (turn == 2). I want them to switch each time the click event occurs.