Click HREF to display specific Array Content?

Question

Is it best if I use HREFs to display specific array content? Should I use a button instead? I am trying to filter and I am new to arrays and javascript, so I am not completely sure what formula to use. I tried to use a composeText function for the button click, but it was not working. Should I use a showDiv function? If anyone has a good idea on how to go about this, please let me know.

I have attached a code pen for your convenience!

https://codepen.io/zoeypoole/pen/bGaZMGO

<div class="wrapper">
  <div class="filter-title">
  Please choose from the list of options below to organize the archives.
</div>

<div class="filter-description">
Data archives have been made possible in part with Are.na members and community boards.
</div>

<!-- <div class="brand">Brand</div>
<div class="year-published">Date Published</div>
<div class="covers">Cover Names</div>
<div class="covers-images">Covers</div> -->
<!-- <div class="options"> -->
<div class="value">
  VALUE
</div>

<div id="valueoptions">
$0.00
$0.15
$0.35
$0.40
$0.50
$0.60
$1.00
$2.00
$2.50
$2.95
$3.00
$3.50
$3.95
$4.00
$4.50
$4.95
$4.99
$5.00
$6.00
$6.50
$7.99
$8.96
$9.00
</div>
<div class="year">
  YEAR
</div>
<div id="yearoptions">
  <a href="#" class="filters" onclick="show('.valueone');">$0.00</a></li>
  $0.15
  $0.35
  $0.40
  $0.50
  $0.60
  $1.00
  $2.00
  $2.50
  $2.95
  $3.00
  $3.50
  $3.95
  $4.00
  $4.50
  $4.95
  $4.99
  $5.00
  $6.00
  $6.50
  $7.99
  $8.96
  $9.00
  </div>
<!-- </div> -->

</div>

<div class="data_cards">
</div>


<script src="style.js"></script>
  <script src="lib/airtable.browser.js"></script>


  </body>
  </html>

@font-face {
    font-family: "Kulture";
    src: url('./assets/fonts/kaotizm-regular.woff') format('woff');
    /* src: url('./assets/fonts/kaotizm-italik.woff') format('woff');  */
    src: url('./assets/fonts/kaotizm-bold.woff') format('woff');
    /* src: url('./assets/fonts/kaotizm-bold-italic.woff') format('woff'); */
}
@font-face {
    font-family: "Kulture Italic";
    src: url('./assets/fonts/kaotizm-italik.woff') format('woff'); 
    src: url('./assets/fonts/kaotizm-bold-italic.woff') format('woff');
}

body{
    background-color: white;
    color: black;
    font-family: "Kulture";
    font-family: 'Inter', sans-serif;
    margin-left: 1vw;
    margin-right: 1vw;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
    grid-auto-rows: minmax(100px, auto);
    margin: 2vw;
    margin-top: 0;
  }

.filter-title{
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 5.5vw;
    font-family: "Kulture";
    font-style: normal;
    /* margin: 1vw; */
}
.filter-description{
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 2vw;
    font-family: 'Inter';
    font-weight: lighter;
}
.value{
    grid-column: 1;
    grid-row: 3;
    font-family: 'Inter';
    font-size: 2vw;
    border: black;
    /* border-radius: 5vw; */
    /* justify-content: space-between; */
}
#valueoptions{
    grid-column: 1;
    grid-row: 4;

    font-family: 'Inter';
    font-size: 2vw;
    border: black;
    margin-bottom: 2vw;
    width: 20vw;
}
.year{
    grid-column: 2;
    grid-row: 3;
    font-family: 'Inter';
    font-size: 2vw;
    border: black;
    /* border-radius: 5vw; */
    /* justify-content: space-between; */
}
#yearoptions{
    grid-column: 2;
    grid-row: 4;

    font-family: 'Inter';
    font-size: 2vw;
    border: black;
    margin-bottom: 2vw;
    width: 20vw;
}


img {
    margin-left: 2vh;
    width: 20.5vw;
    height: auto;
  }
.data_cards {
  column-count: 3;
  column-gap: 220px;
  margin-top: 100px;
  justify-content:space-around;
  display: block;
  }

.data_cards > div{
    background-color: black;
    /* border-style: solid;
    border-width: 1px; */
    color: white;
    margin: 0vw;
    transform: translate(0%, 5%);
    padding: .3vw;
}
#data_cards img {
    margin-top: 50px;
    border: white;
    margin: 5vw;
}

.data_cards > div > p{
    margin-left: 5vw;
    border: black;
    border-style: solid;
    border-width: 2px;
}

const div1 = document.querySelector(".data_cards");

let wrapper = document.querySelector("data_cards");

async function getPeople() {
  const response = await fetch(
    "https://api.airtable.com/v0/appi4i01ehJf6jzVP/elastic?api_key=keyOInlFujAUpPC0f"
  );
  const data = response.json();
  return data;
}

getPeople().then((data) => {
  makeList(data.records);
});

function makeList(records) {
  console.log(`making list of ${records.length} records...`);

  for (let i = 0; i < records.length; i++) {
    const recordField = records[i].fields;
    const attachments = recordField.attachments;

    if (attachments) {
      const listItem1 = document.createElement("div");
      const listItem2 = document.createElement("div");
      const listItem3 = document.createElement("div");
      const listItem4 = document.createElement("div");

      listItem1.appendChild(composeImage(attachments));
      listItem2.appendChild(composeText(recordField.brand));
      listItem3.appendChild(composeText(recordField.datepublished));
      listItem4.appendChild(composeText(recordField.value));

      div1.appendChild(listItem1);
      div1.appendChild(listItem2);
      div1.appendChild(listItem3);
      div1.appendChild(listItem4);
    }
  }
}

function composeText(text) {
  return document.createTextNode(text);
}

function composeImage(attachments) {
  const attachment = attachments[0];
  const img = document.createElement("img");
  img.setAttribute("id", attachment.id);
  img.setAttribute("src", attachment.thumbnails.full.url);

  return img;
}