conway checkers reverse

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
    td{height:19px;width:14px;line-height:16px;overflow:hidden;text-align:center;cursor:pointer;}
    body{background:#999;text-align:center}
    table{margin:auto;table-layout:fixed;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $("#butt").click(function(ev)
        {
            ev.preventDefault()
            var settings = JSON.parse($("#settings").val())
            $("#form").css("display","none")
            var tablecode = '<table border=1 id="t" style="width:' + (settings.table_cols*14) +'px">'
            for(var x = 0;x < settings.table_rows; x++)
            {
                if(x == 10)
                {
                    tablecode += '<tr style="background:lightgray">'
                }
                else
                {
                    tablecode += '<tr>'
                }

                for(var y = 0; y < settings.table_cols;y++)
                {
                    tablecode += '<td></td>'
                }
                tablecode += '</tr>'
            }
            tablecode += '</table>'
            $("body").append(tablecode)
            var selected_cell = $("#t tr:eq(5) td:eq("+ Math.floor(settings.table_cols /2)+")")
            function select_cell(cell)
            {
                selected_cell.css("background","unset")
                cell.css("background","yellow")
                selected_cell = cell
            }
            function coords(cell)
            {
                return {
                    x: cell.index(),
                    y: cell.parent().index(),
                }
            }
            selected_cell.html("x")
            $("td").click(function()
            {
                var cell = $(this)
                cell.x = coords(cell).x
                cell.y = coords(cell).y
                if(cell.html() == "x")
                {
                    select_cell(cell)
                }
                else
                {
                    if(cell.x == selected_cell.x && cell.y == (selected_cell.y + 2))
                    {
                        var midcell = $("#t tr:eq(" + (selected_cell.y + 1) + ") td:eq(" + selected_cell.x + ")")
                        if(midcell.html() == "")
                        {
                            selected_cell.html("")
                            midcell.html("x")
                            cell.html("x")
                        }
                        console.log(coords(selected_cell),"->",coords(cell))
                        select_cell(cell)
                    }
                    if(cell.x == selected_cell.x && cell.y == (selected_cell.y - 2))
                    {
                        var midcell = $("#t tr:eq(" + (selected_cell.y - 1) + ") td:eq(" + selected_cell.x + ")")
                        if(midcell.html() == "")
                        {
                            selected_cell.html("")
                            midcell.html("x")
                            cell.html("x")
                        }
                        console.log(coords(selected_cell),"->",coords(cell))
                        select_cell(cell)
                    }
                    if(cell.x == (selected_cell.x + 2) && cell.y == selected_cell.y)
                    {
                        var midcell = $("#t tr:eq(" + (selected_cell.y) + ") td:eq(" + (selected_cell.x + 1) + ")")
                        if(midcell.html() == "")
                        {
                            selected_cell.html("")
                            midcell.html("x")
                            cell.html("x")
                        }
                        console.log(coords(selected_cell),"->",coords(cell))
                        select_cell(cell)
                    }
                    if(cell.x == (selected_cell.x - 2) && cell.y == selected_cell.y)
                    {
                        var midcell = $("#t tr:eq(" + (selected_cell.y) + ") td:eq(" + (selected_cell.x - 1) + ")")
                        if(midcell.html() == "")
                        {
                            selected_cell.html("")
                            midcell.html("x")
                            cell.html("x")
                        }
                        console.log(coords(selected_cell),"->",coords(cell))
                        select_cell(cell)
                    }
                }
            })
        })
    })
</script>
<div id="form">
<textarea id="settings" cols="60" rows="10">
{
    "table_rows": 100,
    "table_cols": 80
}
</textarea>
<button id="butt">Start</button>
</div>