JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<div class="container">
  <p>Accordion Attempt</p>

  <button class="w3-accordion-color-light w3-accordion w3-accordion-hover">
        <p>{{ first_place }} - {{ user_first_place_percent_total }}%</p>
        <progress class="progress progress-light-blue" max="1000000" value="{{ user_first_place_mem_mb }}"></progress>
      </button>
  <div class="w3-accordion-panel">
    <p>process num 1 would go here</p>
    <p>process num 2 would go here</p>
  </div>

  <button class="w3-accordion-color-light w3-accordion w3-accordion-hover">
        <p> <i class="fa fa-angle-right"></i> {{ second_place }} - {{ user_second_place_percent_total }}%</p>
        <progress class="progress progress-light-blue" max="1000000" value="{{ user_second_place_mem_mb }}"></progress>
      </button>
  <div class="w3-accordion-panel">
    <p>process num 1 would go here</p>
    <p>process num 2 would go here</p>
  </div>

  <button class="w3-accordion-color-light w3-accordion w3-accordion-hover">
        <p> <i class="fa fa-caret-right"></i> {{ third_place }} - {{ user_third_place_percent_total }}%</p>
        <progress class="progress progress-light-blue" max="1000000" value="{{ user_third_place_mem_mb }}"></progress>
      </button>
  <div class="w3-accordion-panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
  </div>

  <button class="w3-accordion-color-light w3-accordion w3-accordion-hover">
        <p> <i class="fa fa-chevron-circle-right"></i> {{ fourth_place}} - {{ user_fourth_place_percent_total }}%</p>
        <progress class="progress progress-light-blue" max="1000000" value="{{ user_fourth_place_mem_mb }}"></progress>
      </button>
  <div...

CSS

.w3-accordion-color {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.w3-accordion-color-light {
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.w3-accordion {
  cursor: pointer;
}

.w3-active,
.w3-accordion-hover:hover {
  background-color: #ccc;
}

.w3-accordion-panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

JavaScript

// JS for my accordion
var acc = document.getElementsByClassName("w3-accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      //this line below is what doesnt work
     //$(this).find($(".fa")).removeClass('fa-caret-right').addClass('fa-caret-down');
    }
  });
}