How to bind an event handler to the removal of an array-item using Javascript/jQuery?

So I have 4 facets to this mini-program I'm toying with:

1. the main display (which displays inputted strings 1 at a time);
2. the form where user inputs words;
3. an independent array that stores each user's inputted strings; and
4. a control panel (mini display) that displays all of the user's current inputted-strings.

Currently, when the user inputs a string, it gets sent to the container-array. From the array, it goes to BOTH the display and the control panel. I've added an event-handler function that allows the user to double-click on the entry in the control panel, which then deletes that entry from the control panel only... (but I need that double-click event to also remove the entry from the array)

$(".controlbox").on('dblclick', 'p', function() {
    $(this).closest('p').remove();
});

SEE original code:

FIDDLE

...

So, how would I bind this event handler so that it also results in the removal of the entry from the container-array??? (it follows that this would also result in the entry's removal from the main display, which is what I'm aiming for)

I would like the user to be able to delete entries from the control panel, as opposed to having to delete elements of the array from the array. In other words, I would like the control panel to act as a control panel, and therefore need to somehow link that event handler back to the container-array....