Create dynamic content based on image click

CURRENT PROBLEM

should result in this record

source: https://docs.google.com/spreadsheets/d/1ZaGDMWYJlvRSJl4dgKe9uSTjrFHWmJ-6LiGR-LGQm6s/edit?usp=sharing

 eg 1  record

AIM

There are 4 images on the top of the page. I want the images to come from a URL in the json file and for them to be clickable and display different content depending on the name of the individual.

DETAILS

The 4 images above are the icons that need to be used as buttons to change the content. Each icon represent a different "userId" the userId can be found in osteoMulti.json. I'd also like the icons on the page to be generated by the file (using the URL from the userImage object in the JSON)


Each row in the json file has a relationship to one user. When it is finished there should be the unique users shown above from something like a "select distinct userid from osteoMulti.json". When the image is clicked on the infoshot to filter the link items below.

FILES THAT NEED CHANGING
osteoMulti.json
index-osteo.html

NEW COLUMNS IN JSON USED FOR THIS

userId

userName

userImage

GITHUB
https://github.com/jimmyyukka/Infoshot



demo page (without the above funtionality)
for illustration here