Нажатие на кнопку, чтобы pu sh массив и возвращает другой массив

Question

У меня есть кнопка Add property, я дважды нажал на нее, чтобы получить двухстрочный вызов property row. Затем я заполнил информацию, нажмите кнопку Show в каждой строке, чтобы показать мою таблицу, и верните массив, как показано на рисунке ниже.

Мне нужно вернуть этот массив, как ["white 100", "white 200", "black 100", "black 200"] в функции showTableProduct(), чтобы вычислить в другой функции removeRow(). Но мой код просто возвращает пустой массив, как я могу это исправить. Вот мой код:

function removeRow() {
    $(document).on('click','.js_remove_row',function () {
        showTableProduct()
    })
}

function showTableProduct() {
    var arr = [];
    var array = [];
    $(document).on('click','.js_show_data:not(.clicked)', function(){
        var tagInput = $(this).parent().parent().parent().parent('.property-row').find('.tags-input');
        $(this).addClass('clicked');
        arr.push(tagInput.tagsinput('items'));

        _arr = arr.slice(0);

        var arrayTable = generateVariants(_arr);
        showTable(arrayTable);

        array.push(arrayTable);
    });

    console.log(array);

    return array;
}

А вот мой кодовый блок (весь мой код здесь): https://codepen.io/LinhNT/pen/WNvmygx. Спасибо.