Javascript Radio all placed in same position

I am getting a bunch of questions from Web API and getting the JSON question and answers and i want to dynamically create a list of possible answers with radio buttons.

The problem im having is that all of the radio buttons are being placed in the same position, but the text is all in the correct position and i cant understand why??

Can anyone see anywhere where im going wrong? The buttons are all being displayed just all ontop of each other...

function questionButtons() {
        document.getElementById("quelist").style.visibility = "visible";
        var table = document.getElementById("qtnlist");
        table.style.visibility = "visible";
        table.innerHTML = "";
        for (var i = 0; i < 10; i++) {
            var row = table.insertRow(0);
            var row2 = table.insertRow(1);
            var row3 = table.insertRow(2);
            var row4 = table.insertRow(3);

            var cell2 = row2.insertCell(0);
            var cell3 = row3.insertCell(0);
            var cell4 = row4.insertCell(0);

            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);

            cell1.innerHTML = "<input type='radio' name='" + i + "'  value='" + i + "' >"+"Answer Opt1 JSON";
            cell3.innerHTML = "<input type='radio' name='" + i + "'  value='" + i + "' >" + "Answer Opt2 JSON";
            cell4.innerHTML = "<input type='radio' name='" + i + "'  value='" + i + "' >" + "Answer Opt3 JSON";

        }
    }