I have an issue with filtering. I have my filter working the way I want it to for the most part. Currently I take user input in string format, then compare that string vs the innerText of my itemWrapperColumns divs. This then creates an array of IDs that I use to compare against my original object of items that my itemWrapperColumnsare based on. I create a new object of only the items that are included in the filter. This then feeds into my function that creates my HTML content.

This is exactly what I want as I want to limit the content on screen to what the user wants to see through the filter so they can tehn apply sorts to the data ete....

The problem I have is if the user uses three criteria to filter, e.g; Start: 307 itemWrapperColumns User Filter: "x","y","z" End: 1 itemWrapperColumns

If the user deletes "z", thus leaving "x" and "y" I would expect to see 50 itemWrappers, but because the only itemWrapperColumnsI have at this point is the 1 from the previous filter thats all that stays.

An idea would be to create a snapshot of the 307 itemWrapperColumns that load at the beginning then use those as my filter data, but I cannot figure this part out. I was hoping the var itemWrapper would solve it, but that variable keeps updating as the filter starts restricting the content.

This is my code to filter my data;

// create a varaible full of all item wrappers from items in stash
var itemWrappers = document.getElementsByClassName('itemWrapperColumns');

function itemFilter(){

    var input, array, filter, txtValue, listofIDs, i, a;
    input = document.getElementById('userFilter');
    array = input.value.split(',');
    itemWrappers = itemWrappers;
    listofIDs = []
    // this loops through each item of object
    for (i = 0; i < itemWrappers.length; i++){
        // assigned a variable to each item
        a = itemWrappers[i];
        // grab all the text associated with the item
        txtValue = a.innerText;
//         console.log('item ID: ', a.getAttribute('data-id'))
        for (x = 0; x < array.length; x++){
            y = array[x]

       if(array.every(item => txtValue.toUpperCase().includes(item.toUpperCase()))==true){
             listofIDs.push(a.getAttribute('data-id'));
         }
      }
   }
    return listofIDs;
};


// returns an itemList that is either all the items if there is no text in the filter
// or returns a filtered down item list that gets passed onto displaying items
function newItemsList() {
    var filterInput = document.getElementById('userFilter');
    if (filterInput.value == ''){
        var itemList = items;
    }else{
        var itemList = items.filter(val => itemFilter().includes(val.id));
        }
    return itemList
};

// run functions on keyup of 'Enter'
$('#userFilter').keyup(function(event) {
    if (event.keyCode === 13) {displayingItems(newItemsList())
    }
});