How do I reset the outputs generated from my ipywidget command button so that only the updated DataFrame is displayed?

Question

Sorry for the potentially confusing phrasing of my question. Essentially, I am trying to make it so that every time I press the 'Add Data' command button there is only one DataFrame displayed. The one that should be displayed is the DF that is modified when the button is pressed. Currently, though, it will append the output with the recently modified DF, on top of the older versions that were created from earlier clicks of the button.

I'm using this code as part of a larger program for performing Monte Carlo simulations and back testing. My goal for these widgets is to input all the option positions I take on certain assets. That way, I can have a consolidated DF of my positions to speed up my analysis in later sections of this program and be available for other programs. The 'Add Data' button will input the values of the other widgets into a dictionary and concat that dictionary with the existing portfolio DF (which is saved in a CSV file).

I believe my problem is caused by me not properly utilizing the ipywidget Output() function, but have not been able to find a workable solution to my problem.

Also, I am writing in a Jupyter Notebook.

import pandas as pd
import datetime
from datetime import *
import ipywidgets as widgets
from ipywidgets import *

############################################## The following section is usually in a seperate cell so I can 
df = {                                       # refresh my portfolio every day, but still add to the DF throughout the day
    'Datetime' : [],
    'Expire' : [],
    'Type' : [],
    'Quantity' : [],
    'Strike' : [],
    'Spot' : []
}

df = pd.DataFrame(df)
df.to_csv("portfolio.csv", index=False)
##############################################


Type = widgets.Dropdown(
    options = ['Call', 'Put'],
    value = 'Call',
    description= 'Select Binary Type',
    disabled=False,
    layout={'width': 'max-content'},
    style={'description_width': 'max-content'}
)

Quantity = widgets.BoundedIntText(value=1,
    min=1,
    max=10,
    step=1,
    description='Quantity:',
    disabled=False,
    layout={'width': 'max-content'},
    style={'description_width': 'max-content'}
)

Strike = widgets.BoundedIntText(
    min=1500,
    max=3500,
    step=1,
    description='Strike:',
    disabled=False,
    layout={'width': 'max-content'},
    style={'description_width': 'max-content'}
)

Spot = widgets.BoundedIntText(
    min=1500,
    max=3500,
    step=1,
    description='Spot:',
    disabled=False,
    layout={'width': 'max-content'},
    style={'description_width': 'max-content'}    
)


Add = widgets.Button(description="Add Data")
out = Output()

def add_on_click(b):

    dt = datetime.now()
    option = Type.value
    quant = Quantity.value
    strike = Strike.value
    spot = Spot.value

    df = pd.read_csv("portfolio.csv")
    now = datetime.now()

    add = {
        'Datetime' : dt,
        'Expire' : datetime(now.year, now.month, now.day, 14, 15,0,1),
        'Type' : option,
        'Quantity': quant,
        'Strike' : strike,
        'Spot': spot
    }

    add = pd.DataFrame(add, index=[0])

    df = pd.concat([df, add],sort=True) #ignore_index=True)
    df.to_csv("portfolio.csv", index=False)

    display(df, out)


Add.on_click(add_on_click)

items = [Type, Quantity, Strike, Spot, Add]

box_layout = Layout(display='flex',
                    flex_flow='row',
                    align_items='stretch',
                    width='100%')

box_auto = Box(children=items, layout=box_layout)

display_widgets = VBox([box_auto])
display_widgets

Answer 1

You can try

def add_on_click(b):
    with out:
        clear_output()
        display(df)
#rest of the code goes here

Answer 2

Change your last lines of add_on_click to:

    out.clear_output()
    with out:
        display(df)