hide input field when checkbox is checked and in localStorage jQuery

I'm trying to hide input boxes using checkboxes, Saving the checkbox name in the localStorage and .hide() input works, however when I refresh the page it doesn't persist the input field to be hidden nor the checkbox to be uncheck.

Can someone point out what I'm missing, I know the check if() is still incomplete, I tried doing a for() inside the if to get he localStorage values and doing ('#'+forVal).hide() or ('#'+forVal).prop('checked', false) but that didn't work at all.

The inputs are dynamic

searchParams = getObjects(apiPaths[i].get.parameters);
for (var x = 0; x < searchParams.length; x++) {
    var container = $('#checkBox');
    var inputs = container.find('input');
    var id = inputs.length + 1;
    var inputName = searchParams[x].name;
    $('<textarea />', { id: inputName, name: inputName, placeholder: inputName, rows: "2", class: "search-area-txt col-sm-12" }).appendTo(searchbox);
    var chkBoxElement = $('<input />', { type: 'checkbox', id: 'x' + id, name: inputName }).appendTo(checkBox);
    chkBoxElement.click(function () {
          checkBoxSetting(this.id, this.name);
    });
    chkBoxElement.prop('checked', true); // initially all inputs are checked

    $('<label />', { 'for': 'x' + id, text: inputName, id: inputName, name: inputName }).appendTo(checkBox);
}

Checks the localStorage for checkboxes

var inputNames = [];
if (localStorage.getItem('chked') !== null) {
    inputNames = JSON.parse(localStorage.getItem('chked'));
}

Saving it to the localStorage

function checkBoxSetting(id, name) {
    var indexOfItem = inputNames.indexOf(name)
    if (indexOfItem >= 0) {
        inputNames.splice(indexOfItem, 1);
    } else {
        inputNames.push(name);
    }
    localStorage.setItem('chked', JSON.stringify(inputNames));
    $("#" + inputNames).hide();
}