Clicking the button to push an array and returns another array

Question

I have an Add property button, I clicked twice on it to get two row call property row. Then I filled out the information, click Show button of each row to show my table and return an array like image below.

I need to return that array like ["white 100", "white 200", "black 100", "black 200"] in showTableProduct() function to calculate in another function removeRow(). But my code just return empty array, how can I fix that. Here's my code:

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;
}

And here is my codepen (All my code is here): https://codepen.io/LinhNT/pen/WNvmygx. Thank you.

You shouldnt be creating the event handlers in your methods, thats half the problem. The other half is that raising an event (like a click) is inherently asynchronous, so the problem is one of returning a value from an async method: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Jamiec, Apr 03 '20 at 12:56

Clicking the button to push an array and returns another array

0 Answers0