I've created a chart where the bar values are added through HTML and modified as needed in JS. The values that the JS is outputting are from the first bar, but it's not taking the values from the other bars.

Does anyone know how can I make that function to output the values for every single bar?

```js
$('.vertical .progress-fill span').each(function(){
  var to = $(".vertical .progress-fill span.to").html();
  var from = $(".vertical .progress-fill span.from").html();

  var percentFrom = from + "%";

  var pBottom = 0 + ( from.slice(0, from.length - 1) );
  var pTop = 100 - (to) + "%" ;

  var bottom = (pBottom) + "%";
  var top = (to - from) + "%";

  $(this).parent().css({
    'height' : top,
    'top' : pTop,
    'bottom' : percentFrom,
  });
});

/*$('.vertical .progress-fill span').each(function(){
  var percent = $(this).html();
  var pTop = 100 - ( percent.slice(0, percent.length - 1) ) + "%";
  $(this).parent().css({
    'height' : percent,
    'top' : pTop
  });
});*/
```

```css
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

body {
  background: #999;
}

h2 {
  margin: 0 0 20px 0;
  padding: 0 0 5px 0;
  border-bottom: 1px solid #999;
  font-family: sans-serif;
  font-weight: normal;
  color: #333;
}

.container {
  width: 500px;
  margin: 20px;
  background: #fff;
  padding: 20px;
  overflow: hidden;
  float: left;
}

/* Vertical */

.vertical .progress-bar {
  float: left;
  height: 300px;
  width: 40px;
  margin-right: 25px;
}

.vertical .progress-track {
  position: relative;
  width: 40px;
  height: 100%;
  background: #ebebeb;
}

.vertical .progress-fill {
  position: relative;
  background: #825;
  height: 50%;
  width: 40px;
  color: #fff;
  text-align: center;
  font-family: "Lato","Verdana",sans-serif;
  font-size: 12px;
  line-height: 20px;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container vertical flat">

  <div class="progress-bar">
    <div class="progress-track">
      <div class="progress-fill">
        <span class="to">90</span>
        <span class="from">20</span>
      </div>
    </div>
  </div>

  <div class="progress-bar">
    <div class="progress-track">
      <div class="progress-fill">
        <span class="to">75</span>
        <span class="from">10</span>
      </div>
    </div>
  </div>

  <div class="progress-bar">
    <div class="progress-track">
      <div class="progress-fill">
        <span class="to">60</span>
        <span class="from">10</span>
      </div>
    </div>
  </div>

  <div class="progress-bar">
    <div class="progress-track">
      <div class="progress-fill">
        <span class="to">100</span>
        <span class="from">0</span>
      </div>
    </div>
  </div>

  <div class="progress-bar">
    <div class="progress-track">
      <div class="progress-fill">
        <span class="to">50</span>
        <span class="from">40</span>
      </div>
    </div>
  </div>

  <div class="progress-bar">
    <div class="progress-track">
      <div class="progress-fill">
        <span class="to">70</span>
        <span class="from">30</span>
      </div>
    </div>
  </div>
</div>
```

You can see the code here

This is the [codepen](https://codepen.io/anon/pen/eVeLbx)