Clear filelist when file input is deleted and rebuilt

Having a bit of trouble controlling my filelists when using multiple file type inputs. To be clear, I am not using a file input with multiple, but multiple single file inputs. The scenario is that a user can select 1 to 5 files, clear them all if they want, but still must send at least 1 file. So I have a max of five file inputs that I will be using on the form. For starters, I have two that I have put into a Fiddle and a CodePen (for some reason they are not working like they are on my local). The user selects a file, that file and size is added to a separate list which shows the name and size and has a button appended to that which calls the clearfileInput function. The clearFileInput function deletes that file input (since that seems to be the only way to truly remove the file so it does not get sent) and I need it to clear the list as well.

CODEPEN HERE JS FIDDLE HERE

Here is the HTML:

  <input type="file" name="filesToUpload" id="filesToUpload" onChange="makeFileList();" />
  <input type="file" name="filesToUpload" id="filesToUpload2" onChange="makeFileList2();" />

 <ul id="fileList"><li>No Files Selected</li></ul>
 <ul id="fileList2"><li>No Files Selected</li></ul>

And the script I am using is quite long because I have to duplicate everything but here is the complete script for one:

function makeFileList() {
    var input = document.getElementById("filesToUpload");
    var ul = document.getElementById("fileList");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
    for (var i = 0; i < input.files.length; i++) {
        var li = document.createElement("li");
        var fileSize = input.files[i].size;
        li.innerHTML = input.files[i].name +"&nbsp;"+ "<span id=\"lblSize\"></span><input onclick=\"clearFileInput()\" type=\"button\" value=\"Clear\" \/>";
        ul.appendChild(li);
    }
    if(!ul.hasChildNodes()) {
        var li = document.createElement("li");
        li.innerHTML = 'No Files Selected';
        ul.appendChild(li);
    }
};
function makeFileList2() {
    var input = document.getElementById("filesToUpload2");
    var ul = document.getElementById("fileList2");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
    for (var i = 0; i < input.files.length; i++) {
        var li = document.createElement("li");
        var fileSize = input.files[i].size;
        li.innerHTML = input.files[i].name +"&nbsp;"+"<span id=\"lblSize2\"></span><input onclick=\"clearFileInput2()\" type=\"button\" value=\"Clear\" \/>";
        ul.appendChild(li);
    }
    if(!ul.hasChildNodes()) {
        var li = document.createElement("li");
        li.innerHTML = 'No Files Selected';
        ul.appendChild(li);
    }
};
//Code Starts
$(document).ready(function() {
    $("#filesToUpload").change(function ()
    {
        var iSize = 0;
        if($.browser.msie)
        {
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var sPath = $("#filesToUpload")[0].value;
            var objFile = objFSO.getFile(sPath);
            var iSize = objFile.size;
            iSize = iSize/ 1024;
        }
        else
            iSize = ($("#filesToUpload")[0].files[0].size / 1024);

        if (iSize / 1024 > 1)
        {
            if (((iSize / 1024) / 1024) > 1)
            {
                iSize = (Math.round(((iSize / 1024) / 1024) * 100) / 100);
                $("#lblSize").html( iSize + "Gb");
            }
            else
            {
                iSize = (Math.round((iSize / 1024) * 100) / 100)
                $("#lblSize").html( iSize + "Mb");
            }
        }
        else
        {
            iSize = (Math.round(iSize * 100) / 100)
            $("#lblSize").html( iSize  + "kb");
        }
    });
    $("#filesToUpload2").change(function ()
    {
        var iSize2 = 0;
        if($.browser.msie)
        {
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var sPath = $("#filesToUpload2")[0].value;
            var objFile = objFSO.getFile(sPath);
            var iSize2 = objFile.size;
            iSize = iSize/ 1024;
        }
        else
            iSize2 = ($("#filesToUpload2")[0].files[0].size / 1024);

        if (iSize2 / 1024 > 1)
        {
            if (((iSize2 / 1024) / 1024) > 1)
            {
                iSize2 = (Math.round(((iSize2 / 1024) / 1024) * 100) / 100);
                $("#lblSize2").html( iSize2 + "Gb");
            }
            else
            {
                iSize2 = (Math.round((iSize2 / 1024) * 100) / 100)
                $("#lblSize2").html( iSize2 + "Mb");
            }
        }
        else
        {
            iSize2 = (Math.round(iSize2 * 100) / 100)
            $("#lblSize2").html( iSize2  + "kb");
        }
    });
});
function clearFileInput(){
    var oldInput = document.getElementById("filesToUpload");
    var newInput = document.createElement("input");
    newInput.type = "file";
    newInput.id = oldInput.id;
    newInput.name = oldInput.name;
    newInput.className = oldInput.className;
    newInput.style.cssText = oldInput.style.cssText;
    newInput.setAttribute("onclick", "makeFileList()");
    oldInput.parentNode.replaceChild(newInput, oldInput);
};
function clearFileInput2(){
    var oldInput = document.getElementById("filesToUpload2");
    var newInput = document.createElement("input");
    newInput.type = "file";
    newInput.id = oldInput.id;
    newInput.name = oldInput.name;
    newInput.className = oldInput.className;
    newInput.style.cssText = oldInput.style.cssText;
    newInput.setAttribute("onclick", "makeFileList2()");
    oldInput.parentNode.replaceChild(newInput, oldInput);
}