Trying to open div [ordered] based on match to button order (Similar to Accordion)

Question

I'm trying to create an experience on my personal site that allows users to click on a hero image of my work and watch a div open above the work in order to see more in depth info.

Here's a jsFiddle: https://jsfiddle.net/1zs7zomo/

I've tried matching the order of the info div to the order of the buttons using

$(function() {
  var hero = $('.display-section__content-hero');
  var treasure = $('.treasure-container');
  var closeButton = $('.close-button');

  treasure.hide();

  hero.click(function() {
    var el = $(this);
    var elData = el.data('order');
    var treasureData = treasure.data('order');

    treasure.each(function(){
      if (treasureData === elData) {
        console.log(treasureData + " = " + elData);
        $(this).slideDown(600);
      }
    });

  })

  closeButton.click(function() {
    $(this).closest('.treasure-container').slideUp(600);
  })
})

But when it opens the info div, it opens all of them instead of the one that matches.

I also tried matching based on .eq() position

$(function() {
  var hero = $('.display-section__content-hero');
  var treasure = $('.treasure-container');
  var closeButton = $('.close-button');

  treasure.hide();

  hero.click(function() {
    var el = $(this);
    var elOrder = el.eq();

    treasure.eq(elOrder).slideDown(600);
  })

  closeButton.click(function() {
    $(this).closest('.treasure-container').slideUp(600);
  })
})

But that doesn't seem to work at all. I supposed I could get into putting specific matching classes on each, but I'm trying to make this as modular as possible. I'm building on Node.js right now to learn and want to make this super modular so that down the road when I figure out how to load data via ajax I can just have them react without having to use any form of order or class, purely data.

Here's the HTML at a base level.. can provide more if necessary

<div class="display-section--build clearfix">
  <div class="treasure-container" data-order="1">
    <div class="treasure-hero">
      <div class="close-button">X</div>
    </div>
    <div class="treasure-description-container">
      <div class="description-head">
        <h1 class="treasure-description__title">Spiffly.is</h1>
        <a class="treasure-description__link" href="http://spiffly.is" target="_blank">Visit Site</a>
      </div>
      <h2 class="treasure-description__role">Front-End Engineer</h2>
      <p class="treasure-description__details">Spiffly is a marketplace for good. A place for B2P -- that's business to prosumer -- transactions. Prosumers get products at wholesale cost, which takes the risk out of trying something new and gives them motivation to promote the product if it's good. Businesses still make money but get marketing from prosumers' social presence. 
      <br>
      <br>
      I built the front-end of Spiffly.is, an e-commerce site, in less than 100 hours despite never having worked with Swig, Node.js or Sass before.
      </p>
    </div>
  </div>
  <div class="display-section__content-hero" data-order="1"></div>
</div>

Answer 1

treasure.each(function(index, obj){
    if ($(obj).data('order') === elData) {

Maybe that snippet will help you.

Answer 2

You should use a data attribute to index the box you need to target

<div class="click_me_to_open" data-order="1"></div>
<div class="hidden_div" data-order-details="1"></div>

this way in your JS you bind the click to .click_me_to_open get the value of data-order and make a selector to target the right box

$('.click_me_to_open').on('click', function () {
      var target = $(this).data('order');

      $('[data-order-details="' + target + '"]').slideDown();
  })