I'm trying to write a simple tic-tac toe game, but I'm having a problem with two things:

1. My 3x3 board does not split into different rows - when I try to make more game tiles it just puts it along the same row
2. I can create new X and O images by copying my code at the bottom, but I do not know how to lock them in place once they've been played.

Here's my current HTML:

```
<!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    #div1 {
        width: 80px;
        height: 80px;
        padding: 10px;
        border: 1px solid #aaaaaa;
        float:left;
    }
    </style>
    <script type="text/javascript">
    function allowDrop(ev) {
        ev.preventDefault();
    }
    function drag(ev) {
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    function drop(ev) {
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
        ev.preventDefault();
    }
    </script>
    <title>JavaScript  Drag &amp; Drop Tic-Tac-Toe</title>
    </head>
    <body>
        <p>Drag the X and O images into the tic-tac-toe board:</p>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

        <img id="drag1" src="X.png" draggable="true" 
            ondragstart="drag(event)" width="75" height="75" />
        <img id="drag2" src="O.png" draggable="true" 
            ondragstart="drag(event)" width="75" height="75" />

    </body>
    </html>

```