How to Attach/Remove Click Event Listener to Button Element Dynamically

This is related to a recent question I posted, regarding the below code:

<div class="toggle-fieldView">
        <button type="button" data-value="Fund Now" class="">FUND NOW</button>
        <button type="button" data-value="Fund Later" class="active">FUND LATER</button>
</div>

Select allOpen in new window

This button element is loaded dynamically in the user flow after a specific view is displayed. How do I dynamically attach the "click" event to these two buttons?  I want to monitor when they are clicked but I want to remove the listener once the view changes? This is what I'm currently testing with but I need to be able to attach and then remove the listener? How do I do this?

    function _dtmCheckOAO4FundingMethod(){
        document.body.addEventListener('click', function(event) { //Need to fix and attach when needed
	        if((event.target.dataset)&&(event.target.type == "button")){ 
                if(event.target.dataset.value == "Fund Now"){
                    sessionStorage.setItem("_dtmFundType", "fund now");
                    sessionStorage.setItem("_dtmFundTypeDetail", ":Funding Method:fund within 30 days");
                }
                if(event.target.dataset.value == "Fund Later"){
                    sessionStorage.setItem("_dtmFundType", "fund later");
                     sessionStorage.setItem("_dtmFundTypeDetail", ":Funding Method:Credit Card");
                }
            }
        });
    };

Select allOpen in new window

I'm assuming that I 'd have to have two different assignments (one for each button) and manage separately?
Thanks!