JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <h1>marge2 Algorithm</h1>
    <div>list1: <input id="inputList1" value="1,6,3,7,5"/></div>
    <div>list2: <input id="inputList2" value="4,2,8,9" /></div>
    <button onclick="goPressed()">Go</button>
    <h2>Output</h2>
    <div id="output"></div>
</body>

CSS

body {
    margin: 10px;
    font-family: Helvetica;
}
h1 {
    font-size: 140%;
    margin-bottom: 20px;
}
h2 {
    font-size: 110%;
    margin: 10px 0;
}

JavaScript

//marge2 test Algorithm

function goPressed() {

    // Input
    var inputList1 = $('#inputList1').val().split(",");
    var inputList2 = $('#inputList2').val().split(",");

    // Algorithm
    var output = mergeSort(inputList1).toString();

    // Output
    $('#output').html(output);
}

function mergeSort(list) {
    // base case if list has only 1 element
    if(list.length<=1) {
        return list;
    }
    // split by recursive left, right until length of both is 1
    var middle = parseInt(list.length/2);
    var listLeft = mergeSort(list.slice(0,middle));
    var listRight = mergeSort(list.slice(middle,list.length));
    
    // use marge to combine results
    return merge(listLeft, listRight);
    
}

function merge(list1, list2) {
    //alert(list);
    var listResult = [];
    while (list1.length > 0 && list2.length > 0) {
        if (list1[0] < list2[0]) {
            listResult.push(list1.shift());
        } else {
            listResult.push(list2.shift());
        }
    }
    listResult = listResult.concat(list1, list2);
    //alert(list.slice(1,list.length));
    //list.shift();
    return listResult;
}