jQuery stopPropagation not stopping click through

I have a panzoom plugin that is working well. When I click on var elem it adds a small div cp_select in the correct location. Then, when I click on that newly created cp_select div, it removes that div. So you can add and remove it accordingly. However, when I click on the cp_select div, it removes it then immediately adds it back in because the click is propagating through. I have tried event.stopPropagation() and event.stopImmediatePropagation() with no luck. Any ideas how to prevent the cp_select firing the map_click(e)?

enter image description here

window.panzoom = panzoom(elem, {
        onClick(e)     {
            map_click(e);
        }
})


function map_click(e) {
    
    $(".map_cont").prepend('<div class="cp_select" style="left:'+calc_x+'px ;top:'+calc_y+'px"></div>');

}


 $('body').on('click', '.cp_select', function(event) {
    
    event.stopImmediatePropagation()
    $(this).remove()
    return false;
    
});