addEventListener multiple times in a click event

I have a problem trying to catch a event in a javascript file. I need to handle some buttons when these are clicked. They have differente behaviour, for example, some add some elements, other can multiple add elements, or delete them.

I have 4 buttons in a panel (search, add, add+ and delete). To be precise, I'll explain the problem with the search button.

I have a function "search" that takes the button from de document, and link to a eventListener

btn_search = document.getElementById('searchBtn');
btn_search.addEventListener("click", search);

Then, after click over btn_search, a modal display with some inputs and a submit button. When I click over the button, the modal closes with the data that I need. In this situation the system works well, but when I want to operate with another functions (add, delete, or the same search), this last tasks execute but all the other previous operations executes too. It's as if repeat all the secuence together when a new operation it's coming.

This is the code that I use for search, its similar in the other operations

function search(event) {
event.stopPropagation();
buildModal(1);
$('#modal_gid').modal('show');

btn_modal_footer.addEventListener("click", search_elems); //button to attach function to "search button" in button

function search_elems(event) {
    event.preventDefault();
    let code = input_code.value;
    if (code != null && code != "")
        $.ajax({ 
            url: base_url.value + 'index.php/ajax_get_elems',
            method: 'post',
            dataType: "json",
            data: { "code": code },
            success: function (response) {
                success functions
            }
        });
    else
        handler_errores_code(2)
}

I tried with removeEventListener but not work. With a counter or flag variables too.

Thanks!

Via Active questions tagged javascript - Stack Overflow https://ift.tt/F860hCZ