オセロ　駒の置き方とその準備

現在、オセロゲームをJ Queryで作成しております。初心者で全くわからない状況からの作成でいろいろと質問して解決しながら作成していきたいと思います。どのように、作成していったら良いかも？ですが、６４マスが作成できましたので、次の段階としてマスの中に駒を置いていくのにどうしたら良いか？

質問１、　ゲームスタート時に４つの（白２つ　黒２つ）をどのように置けば良いかが？です

質問２、配列は２重配列になると思うのですが、xとYとで位置を指定していく方法が？です。

質問３、マスをクリックした時（黒の順番と白の順番に従って）その中に駒が置けるようにするのにはどのようにしたら良いでしょうか？

以下に、コードを記載したもの（全くわからない状況からの作成ですので）めちゃくちゃですが、アドバイスいただけましたらありがたいです。よろしくお願いします。参考にしましたソースコードは、https://teratail.com/questions/18050です。自分なりに、参考のコードをみながら書いてみたのですが、どのように書いていったら良いのかわからなくなってしまいました。アドバイスいただけましたらありがたいです。よろしくお願いします。

HTML＋JS
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="style.css">
6    <link rel="stylesheet" href="css/sanitize.css">
7    <script
8  src="https://code.jquery.com/jquery-3.3.1.min.js"
9  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
10  crossorigin="anonymous"></script>
11  
12    <title>オセロ</title>
13    
14    <script>
15//        オセロの盤面の表示 J Query使用
16        $(document).ready(function(){
17          var html='';
18           for(var i=1; i<65; i++){
19           html += '<p class="bord">' + String(i) + '</p>';
20           if (i % 8 == 0) {
21            html += "<br/>";
22          }
23       }
24           $(".flex").html(html);
25       });
26
27//白と黒の石を変数に格納　　（？）
28  var stone_b =
29  var stone_w =
30      
31  Var stone_b = 1;
32  var stone_w = -1;
33        
34//版のフィールドの作成  　　（？）
35  var field = [
36      [9,9,9,9,9,9,9,9],
37      [9,0,0,0,0,0,0,9],
38      [9,0,0,0,0,0,0,9],
39      [9,0,0,0,0,0,0,9],
40      [9,0,0,0,0,0,0,9],
41      [9,0,0,0,0,0,0,9],
42      [9,0,0,0,0,0,0,9],
43      [9,9,9,9,9,9,9,9]
44  ];
45    
46//白と黒の初期配置　　　　　（？）
47  function setStone() {
48    field[4][5]=stone_b;
49    field[5][4]=stone_b;
50    field[4][4]=stone_w;
51    field[5][5]=stone_w;
52  }
53
54</script>
55
56
57  </head>
58   
59    <body>
60        <h1 class="title">オセロ</h1>
61        <div class="stone_b"></div>
62        <div class="stone_w"></div>
63    <div class="wrapper">
64
65        <div class="flex">
66<!--
67        <div class="stone_b"></div>
68        <div class="stone_w"></div>
69-->
70<!--        <p class="bord"></p>-->
71        <div class="stone_b"></div>
72        <div class="stone_w"></div>
73
74        </div>
75    </div>
76    
77</body>
78</html>
79

CSS
1@charset "utf-8";
2*{
3    margin: 0;
4    padding: 0;
5}
6
7.title{
8    text-align: center;
9    margin-bottom: 10px;
10}
11
12.wrapper{
13    display: flex;
14    justify-content: center;
15}
16.flex{
17    display: flex;
18    flex-direction: row;
19    justify-content: center;
20    flex-wrap: wrap;
21    width: 700px;
22/*    text-align: center;*/
23/*    align-content: center;*/
24}
25
26.bord{
27    width:80px; height:80px; background:darkgreen;
28    border: 1px solid black;
29    border-collapse: collapse;
30}
31
32.stone_b{
33    border-radius: 50%;
34    width:70px; height:70px;
35    background:black;
36}
37
38.stone_w{
39    border-radius: 50%;
40    width:70px; height:70px;
41    background:skyblue;
42}