ThreeJS Creating three tables with header

.Hello, I'm trying to cycle through a table and create three tables of clickable divs with a header for each (ideally with a separate class to make them look different). I'm trying to use a while loop with 3 if statements but the headers are not displaying properly. All three still show up as normal divs instead of with different classes but the first one is covered with a second copy of the third column header with the correct header and the second header is covered with a second copy of the first header, again with the correct class. If anyone could point out how I'm mistaken it would be greatly appreciated, thanks!

JS Snippet

var table = [


        "Column Title", "#", 2,2,
        "Column Item", "website.com", 1, 3,
        "Column Item 2", "website2.com", 2, 3,
        // Etc.
];
var camera, scene, renderer;
var controls;

var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };

init();
animate();

function init() {

    for ( var i = 0; i < table.length; i += 4 ) {

        if(i === 0){
                var courtsTitle = document.createElement('div');
                courtsTitle.className = 'listTitle';
                courtsTitle.innerHTML = "<p>Column Title</p>";

                var object = new THREE.CSS3DObject( courtsTitle );
                object.position.x = Math.random() * 4000 - 2000;
                object.position.y = Math.random() * 4000 - 2000;
                object.position.z = Math.random() * 4000 - 2000;
                scene.add( object );

                objects.push( object );


                var object = new THREE.Object3D();
                object.position.x = ( 6 * 480 ) - 2900;
                object.position.y = - ( 2 * 340 ) + 1550;

                targets.table.push( object );
            }
            if(i === 14){
                var departmentsTitle = document.createElement('div');
                departmentsTitle.className = 'listTitle';
                departmentsTitle.innerHTML = "<p>Column Title2</p>";

                var object = new THREE.CSS3DObject( departmentsTitle );
                object.position.x = Math.random() * 4000 - 2000;
                object.position.y = Math.random() * 4000 - 2000;
                object.position.z = Math.random() * 4000 - 2000;
                scene.add( object );

                objects.push( object );


                var object = new THREE.Object3D();
                object.position.x = ( 10 * 480 ) - 2900;
                object.position.y = - ( 2 * 340 ) + 1550;

                targets.table.push( object );
            }

            if(i === 28){
                var servicesTitle = document.createElement('div');
                servicesTitle.className = 'listTitle';
                servicesTitle.innerHTML = "<p>Column Title3</p>";

                var object = new THREE.CSS3DObject( servicesTitle );
                object.position.x = Math.random() * 4000 - 2000;
                object.position.y = Math.random() * 4000 - 2000;
                object.position.z = Math.random() * 4000 - 2000;
                scene.add( object );

                objects.push( object );

                //

                var object = new THREE.Object3D();
                object.position.x = ( 2 * 480 ) - 2900;
                object.position.y = - ( 2 * 340 ) + 1550;

                targets.table.push( object );
            } else {
                var department = document.createElement('a');
                department.className = 'department';
                department.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
                department.setAttribute('href', table[i + 1]);
                department.setAttribute('target', "_blank");

                var link = document.createElement('div');
                link.className = 'link';
                link.innerHTML = table[i];
                department.appendChild(link);

                /*Random Starting point*/
                var object = new THREE.CSS3DObject( department );
                object.position.x = Math.random() * 4000 - 2000;
                object.position.y = Math.random() * 4000 - 2000;
                object.position.z = Math.random() * 4000 - 2000;
                scene.add( object );

                objects.push( object );


                /*Final position*/
                var object = new THREE.Object3D();
                object.position.x = ( table[ i + 2 ] * 480 ) - 2900;
                object.position.y = - ( table[ i + 3 ] * 340 ) + 1550;

                targets.table.push( object );
            } 

}