Collapsible not Working [JSFiddle demo Included]

I am trying to get this collapsible to function normally and show the first set of information when the page is loaded, make it disappear when the user presses "read more", and show new information.

Currently the collapsible is only working on the first product. It is not working on the others. And for some reason, when clicking "read more" on other products, it collapses the first one still.

Another problem is if you inspect, the collapsible is reaching very far down the page, so if you click below a product, it opens.

https://jsfiddle.net/bike4453/mq73evos/2/

<script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }

    function display() {
      var x = document.getElementById("cover");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }

  </script>