JavaScript - Two tables displayed side by side

Question

Newbie coder here. I am creating an app (see below) that has 2 user input fields located side by side. Parse buttons by these user input fields generate 2 separate tables. The tables are placed vertically and I need them to be placed side by side underneath the user input fields. I've seen many solutions to this problem but they all pertain to html code. I don't know how to do that in JS. Please help! An example of user input would be: 1,2,3,4

realArrayRequest = [];
realArrayResponse = [];

function generateTableRequest(){
    var body = document.body;
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");

    for(var i=0; i<msg1Req.length; i++){ //rows
        var row=document.createElement("tr");

        for (var j=0; j < 3; j++){
            if (j === 0){  //columns
            var cell = document.createElement("td");
            var cellText = document.createTextNode(msg1Req[i]);
            cell.appendChild(cellText);
            row.appendChild(cell);
            } else if (j === 1){
                var cell = document.createElement("td");
                var cellText = document.createTextNode(realArrayRequest[i]);
                cell.appendChild(cellText);
                row.appendChild(cell);
            } else if (j === 2){
                var cell = document.createElement("td");
                //cell.setAttribute("contenteditable");
                var cellText = document.createTextNode(msg1ReqType[i]);
                cell.appendChild(cellText);
                row.appendChild(cell);
            } else {  
                var cell = document.createElement("td");
                var cellText = document.createTextNode('');
                cell.appendChild(cellText);
                row.appendChild(cell);
        } 
            
        }
     tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    body.appendChild(tbl); 
    tbl.setAttribute("border", "2");
}


function generateTableResponse(){
    var body = document.body;
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");

    for(var i=0; i<msg1Res.length; i++){ //rows
        var row=document.createElement("tr");

        for (var j=0; j < 3; j++){
            if (j === 0){  //columns
            var cell = document.createElement("td");
            var cellText = document.createTextNode(msg1Res[i]);
            cell.appendChild(cellText);
            row.appendChild(cell);
            } else if (j === 1){
                var cell = document.createElement("td");
                var cellText = document.createTextNode(realArrayResponse[i]);
                cell.appendChild(cellText);
                row.appendChild(cell);
            } else if (j === 2){
                var cell = document.createElement("td");
                //cell.setAttribute("contenteditable");
                var cellText = document.createTextNode(msg1ResType[i]);
                cell.appendChild(cellText);
                row.appendChild(cell);
            } else {  
                var cell = document.createElement("td");
                var cellText = document.createTextNode('');
                cell.appendChild(cellText);
                row.appendChild(cell);
        } 
            
        }
     tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    body.appendChild(tbl); 
    tbl.setAttribute("border", "2");
}


function parseUserInputReq(){
    realArrayRequest=[]; 
    //cleans the array from all previous values entered before running all functions
    var input = document.getElementById("userInputRequest").value;
    var noBracketsStr=input.split(",");

        //pushing results from noBracketsStr into a new array realArray, because it seems that split() does not change the original array(string)
        for(var i = 0; i < noBracketsStr.length; i++){
            realArrayRequest.push(noBracketsStr[i])
        }
  
    generateTableRequest();
}

function parseUserInputRes(){
    realArrayResponse=[]; 
    //cleans the array from all previous values entered before running all functions
    var input = document.getElementById("userInputResponse").value;
    var noBracketsStr=input.split(",");

        //pushing results from noBracketsStr into a new array realArray, because it seems that split() does not change the original array(string)
        for(var i = 0; i < noBracketsStr.length; i++){
            realArrayResponse.push(noBracketsStr[i])
        }
  
    generateTableResponse();
}






//Message elements

//Message 1
const msg1Req = ['Login Command', 'version', 'xID', 'passcode', 'machineID', 'equipment Serial Number', 'userSlot', 'clubID', 'loginType'];
const msg1ReqType = ['integer', 'integer', 'string', 'string', 'string', 'string', 'integer', 'integer', 'string'];
const msg1Res = ['Login Command', 'Version', 'Result', 'User token'];
const msg1ResType = ['integer', 'integer', 'integer', 'string'];

#parseCommandRequest {
    width: 50%;
    float: left;
};

#parseCommandResponse {
    width: 50%;
    float: left;
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link rel="stylesheet" href="styles.css">
        <script defer type="text/javascript" src="index.js" charset="UTF-8"></script>
</head>
<body>
   
    <div id="parseCommandRequest">
        <form name="userInputReq">
            Request 
            <input type="text" id="userInputRequest"> 
            <input type="button" value="Parse" onclick="parseUserInputReq()">
        </form>
    </div>
    <div id="parseCommandResponse">
        <form name="userInputRes">
            Response 
            <input type="text" id="userInputResponse"> 
            <input type="button" value="Parse" onclick="parseUserInputRes()">
        </form>
    </div>


</body>
</html>

Answer 1

As you mentioned, there's a lot of different ways to solve this. The most common way to solve problems like this is to use CSS. There's actually a quite easy way to achieve this with the CSS you already have. Instead of injecting the two tables in the body you can inject the tables in #parseCommandRequest and #parseCommandResponse. To do this you simply have to replace body.appendChild(tbl); with code to inject them in the correct divs instead.

This is one possible way to achieve that:

// Replace body.appendChild(tbl); with the following
var parseCommandRequestDiv = document.getElementById("parseCommandRequest");
parseCommandRequestDiv.appendChild(tbl);

// Do the same for the response
var parseCommandResponseDiv = document.getElementById("parseCommandResponse");
parseCommandResponseDiv.appendChild(tbl);