Tick tack toe AI

How can i build a response between computer and player to place x and o in grids i created…Any help is appreciated

<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>


.boks{
margin-top:5%;	
border:2px solid black;
width:19%;
}


#one{
	width:100px;
	height:100px;
	border-bottom:2px solid black;
	border-left:2px solid black;
	font-size:680%;
}

#two{
	width:100px;
	height:100px;
	border-bottom:none;
	border-left:2px solid black;
}

#three{
	width:100px;
	height:100px;
	border-bottom:2px solid black;
	font-size:680%;
}

#four{
	width:100px;
	height:100px;
}
</style>
<script>
$(document).ready(function(){
	var player;
	prompt("Which side do you choose x or o");
	/*if(player === x ){
		
	}*/
	$("#three").click(function(){
	$("#three").html("x");
	});
	$("#one").click(function(){
	$("#one").html("o");
	});
});
</script>
</head>
<body>
<div class="container-fluid boks" >
<div class="row">
<div class="col-xs-4" id="three">
</div>
<div class="col-xs-4" id="one" class="circle">
</div>
<div class="col-xs-4" id="one">
</div>
</div>
<div class="row">
<div class="col-xs-4" id="three">
</div>
<div class="col-xs-4" id="one">
</div>
<div class="col-xs-4" id="one">
</div>
</div>
<div class="row">
<div class="col-xs-4" id="four">
</div>
<div class="col-xs-4" id="two">
</div>
<div class="col-xs-4" id="two">
</div>
</div>
</div>
</body>```

You would need to generate the trie of all the possible states of the game. Every cell on your table can have 3 different values (0, x, empty). So you can use 2 bits per cell to encode your table as an integer. Then you generate all the possible transitions and start marking the states with a depth-first graph traversal. A state that has a transition to a losing state is marked as a winning state (because the other player would find himself in a losing situation). If there is at least one transition to an indecisive state, then the current state is indecisive as well. Otherwise it’s a losing state. Now your AI can leverage this trie to always pick either a winning state if available or push the game into a draw.

I have tried writing function which checks if div is empty but i have no idea as to how to get specific character in div for AI. When computer makes it’s move in tic tac toe.Here is my current code which checks if block(div) is empty and then makes an x or o.

<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="tictest.css" type="text/css">
<script src="tictest.js">
</script>
</head>
<body>
<div>
<p class="btn btn-primary" id="Xbutton"> I Choose X</p>
<p class="btn btn-primary" id="Obutton"> I Choose O</p>

</div>
<div class="container-fluid boks" >
<div class="row">
<div class="col-xs-4 O1" id="three">
</div>
<div class="col-xs-4 O2" id="one" class="circle">
</div>
<div class="col-xs-4 X O3" id="one">
</div>
</div>
<div class="row">
<div class="col-xs-4 O4" id="three">
</div>
<div class="col-xs-4 O5" id="one">
</div>
<div class="col-xs-4 O6" id="one">
</div>
</div>
<div class="row">
<div class="col-xs-4 O7" id="four">
</div>
<div class="col-xs-4 O8" id="two">
</div>
<div class="col-xs-4 O9" id="two">
</div>
</div>
</div>
<div>
<p class="btn btn-primary text-center" id="reset">Reset</p>
<div>
</body>

body{
	background-image:url("https://images.unsplash.com/photo-1464639351491-a172c2aa2911?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=0952e4798d3b4000081e0e3f4f5c5a1a");
	background-size:100%;
}

div{
	text-align:center;
}

.boks{
margin-top:5%;	
border:2px solid black;
width:19%;
}


#one{
	width:100px;
	height:100px;
	border-bottom:2px solid black;
	border-left:2px solid black;
	font-size:680%;
}

#two{
	width:100px;
	height:100px;
	border-bottom:none;
	border-left:2px solid black;
}

#three{
	width:100px;
	height:100px;
	border-bottom:2px solid black;
	font-size:680%;
}

#four{
	width:100px;
	height:100px;
}

$(document).ready(function(){
	var player;
	var AI = "O";
	var random = Math.floor(Math.random() *10);
	
	
	
	function computersChoice(){
		while($(".O:empty")){
			randome = Math.floor(Math.random() *10);
		}
	}
	
	$("#Xbutton").one("click",function(){
	player = "X";
    AI = "O";
	$("#Xbutton").css("opacity",0.23);
			alert("You have chosen X");
	});
	
	$(".X").click(function(){
		if ($(".X:empty")){
			$(".X").html("X");
		}
	});
	
	$(".O4").click(function(){
	if($(".O4:empty")||$("player") ==="X"){
		$(".O4").html("X");
	}
	});
	
	
	$(".O4").click(function(){
	if($(".O4:empty")||$(player) ==="O"){
		$(".O4").html("O");
	}
	});
	
$("#X").click(function(){
 if($("#X:empty")){
 $("#test").html("X");
}
});
	
	$("#Obutton").one("click",function(){
	player = "O";
    AI = "X";
	$("#Obutton").css("opacity",0.23);
			alert("You have chosen O");
	});
	

	$("#three").click(function(){

	$("#three").text("X");
	
	});
	$("#one").click(function(){
	$("#one").html("O");
	});;
	
	$("#reset").click(function(){
	//$("#Xbutton").css("opacity",1);
	//$("#Obutton").css("opacity",1);
	location.reload();
	});
	
	
});

Thank you for replying i have fixed my code and have saved it at codepen link https://codepen.io/Ajax-2031/pen/LjvwOY. I created similar id’s for borders(css) of my div’s which form’s the square’s of tic tac toe game inside my div with class name boks.The circle class i removed which i wanted to use as my click function which will draw an O in that particular div if it’s the computer’s turn(if player has selected X) or player has chosen O. I have found empty() function on mdn to check if div is empty. Trying to use it to check if square is in use on board to draw an x or o for player or computer, depending on which character was chosen by computer or player ex computer is x and player chose O. I have marked my div as individual square in div class as O1 through to O9 as to reverence a click function for each square i f player click’s on div ex O1 it will draw an X if player chose X or O if player chose O. I am not sure how to accomplish the computers choice in movements. I googled a solution which uses Math.floor(Math.round()*10); to randomly choose a square (in my case a div class no ex O2 as it’s square). I tried fading buttons and a alert pop box with my choose x or choose O buttons.

I have fixed the buttons to only to display O when clicking I choose O or X when choosing i choose X. Could not figure how to get computer to use Math.floor(Math.round()*10). In a while loop(check if classes .O1 -.O9 are empty when its is computers move) or other loops to choose a random number and .square to mark a x if player is x or o if player is o. Here is my latest attempt at tic tac toe https://codepen.io/Ajax-2031/pen/LjvwOY reseized to fit in small screen.