The clear_output isn't clearing the output whenever I click a new button

Question

so I'm trying to create an interactable Gui with ipywidgets. And it's mainly going fine except for one part - the clear output. So the code is suppose to do this -> you click a button and it shows you information for that button. And if you click another button, the previous information gets cleared and replaced with the new information. Except whenever I try to do this, the clear doesn't work (and the info gets stacked on to of each other), or it gets rid of everything but the button. I know the issue is in the button function code block, but I don't know how to solve it. Any advice?

#get pic

from PIL import Image
import requests

[12 links to google image that I have to remove or else the post
 gets marked as spam] 

#assign pic

image_name = []
image_name.append({'name':'Avery Bradley', 'image':im_aries})
image_name.append({'name':'Jae Crowder', 'image':im_taurus})
image_name.append({'name':'John Holland', 'image':im_gemini})
image_name.append({'name':'R.J. Hunter', 'image':im_cancer})
image_name.append({'name':'Jonas Jerebko', 'image':im_leo})
image_name.append({'name':'Amir Johnson', 'image':im_virgo})
image_name.append({'name':'Jordan Mickey', 'image':im_libra})
image_name.append({'name':'Kelly Olynyk', 'image':im_scorpio})
image_name.append({'name':'Terry Rozier', 'image':im_sagittarius})
image_name.append({'name':'Marcus Smart', 'image':im_capricorn})
image_name.append({'name':'Jared Sullinger', 'image':im_aquarius})
image_name.append({'name':'Isaiah Thomas', 'image':im_pisces})

pd.set_option("max_colwidth", None)

#button function

from IPython.core.interactiveshell import IPython
from IPython.display import display, clear_output
output = ipywidgets.widgets.Output()

def on_btn_click(btn):
  
  #this line clears everything except the info.
  #clear_output()

  #this line doesn't work
  #with output:
    #clear_output()

  if btn.description == 'Avery Bradley':
    print (file.loc[0])
  if btn.description == 'Jae Crowder':
    print (file.loc[1])
  if btn.description == 'John Holland':
    print (file.loc[2])
  if btn.description == 'R.J. Hunter':
    print (file.loc[3])
  if btn.description == 'Jonas Jerebko':
    print (file.loc[4])
  if btn.description == 'Amir Johnson':
    print (file.loc[5])
  if btn.description == 'Jordan Mickey':
    print (file.loc[6])
  if btn.description == 'Kelly Olynyk':
    print (file.loc[7])
  if btn.description == 'Terry Rozier':
    print (file.loc[8])
  if btn.description == 'Marcus Smart':
    print (file.loc[9])
  if btn.description == 'Jared Sullinger':
    print (file.loc[10])
  if btn.description == 'Isaiah Thomas':
    print (file.loc[11])

#create button

button_list = []
for i in range (0,12):
  button = ipywidgets.widgets.Button(description=image_name[i]['name'])
  button.on_click(on_btn_click)
  button_list.append(button)

#resize button

 grid = widgets.Grid(1,6, header_column=True, header_row=True)
 newsize = (100,100)

 for (row, col) in grid:
  index = row*6+col
  print("\n")
  display(image_name[index]['image'].resize(newsize))
  display(button_list[index])

 for (row, col) in grid:
  index = row*6+col
  print("\n")
  display(image_name[index+6]['image'].resize(newsize))
  display(button_list[index+6])

  display(output)

I'm working on google colab and unfortunately, I can't find the site where I found the CVS. If it helps, this is what my cvs looks like:

Name	Team	Number	Position	Age	Height	Weight	Salary
Avery Bradley	Boston	0	PG	25	2-Jun	180	$$$$$$
Jae Crowder	Boston	99	SF	25	6-Jun	235	$$$$$$
John Holland	Boston	30	SG	27	5-Jun	205	$$$$$$

Answer 1

I think the main problem with the code is the indenting, the if statements need to be wrapped in the "with output:" Like so:

def on_btn_click(btn):
    with output:
        clear_output()
        if btn.description == 'Avery Bradley':
            print (file.loc[0])

And then for your display(output) call in the last picture you sent needs to be outside the for loop so it is only called once like this:

for (row, col) in grid:
    index = row*6+col
    print("\n")
    display(image_name[index+6]['image'].resize(newsize))
    display(button_list[index+6])

display(output)