How to overwrite document.write() output(s) in javascript

See more:

Javascript

I am using an array of objects. I'm searching for a 'Shirt' with input let searchForType = "Shirt";

Then I searched for 'Size' with input `let searchForSize = "Small";` (Note: Both `'Shirt'` and `'Small'` is entered).

All I want to display only selected size's Shirt(s) when size is entered there and all result(s) when only Shirt is entered.

What I'm getting with my code is all results(Medium and Large size also) when size is entered Small.

What I have tried:

My Data

let items = [
        {
            type: "Shirt",
            gender: ["Men", "Women", "Boys", "Girls"],
            size: "Small",
    
        },
        {
            type: "Shirt",
            gender: ["Men", "Women", "Boys"],
            size: "Medium",
    
        },
        {
            type: "Shirt",
            gender: ["Men", "Women"],
            size: "Large",
    
        },
    ];

    let filteredArr = [];
    filteredArr = items;

Code for my 1st input i.e. 'Shirt'

function fetchItemsByType() {
        
        let isItemAva = filteredArr.filter(obj => obj["type"] === searchForType);
        isItemAva.forEach(obj => {
            for (let i = 0; i < obj["type"].length; i++) {
                if (obj["type"] === searchForType) {}
            } document.write(obj["type"] + " of " + obj["size"] + " size is Available for " + obj["gender"] + "<br>" + "<br>")
           
        });
        return isItemAva;
    }
    let getItemsByType = fetchItemsByType();

    if (searchForType === searchForType) {
        console.log(getItemsByType);
    }

Output

Shirt of Small size is Available for Men,Women,Boys,Girls
    
    Shirt of Medium size is Available for Men,Women,Boys
    
    Shirt of Large size is Available for Men,Women

Code for 2nd input i.e. 'Small' (Note: Both 'Shirt' and 'Small' is entered)

function fetchItemsBySize() {
    
        let isSizeAva = getItemsByType.filter(obj => obj["size"] === searchForSize);
        isSizeAva.forEach(obj => {
            for (let i = 0; i < obj["size"].length; i++) {
                if (obj["size"] === searchForSize) {}
            }document.write(obj["type"] + " of " + obj["size"] + " size is Available for " + obj["gender"] + "<br>" + "<br>")
        
        });
        return isSizeAva;
    }
    let getItemsBySize = fetchItemsBySize();
    
    if (searchForSize === searchForSize) {
        console.log(getItemsBySize);
    } 

Output

Shirt of Small size is Available for Men,Women,Boys,Girls
    
    Shirt of Medium size is Available for Men,Women,Boys
    
    Shirt of Large size is Available for Men,Women
    
    Shirt of Small size is Available for Men,Women,Boys,Girls

But I want to display only

Shirt of Small size is Available for Men,Women,Boys,Girls

When my both inputs are entered.

Why I'm getting the all results in my final output? Am I missing something or is there any other way to get the same? Thanks in advance to helpers.