Progress bar update width when page load?

When I load a page, I want to show a progress bar in a table field, like this:

<% @beacons.each do |beacon| %>
...
    <td><div id="progressbar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="10"
      aria-valuemin="0" aria-valuemax="100" style="width:100%" ><%= beacon.power %>%</div></td>

but I can not beacon.power to update the width in progress bar, I don't need real time refresh, I just want when I load this page, the progress bar's width can use my db data: beacon.power to desplay

my website is

IP/beacons

my controller:

  def index
    @beacons = Beacon.all

    respond_to do |format|
      format.html { @beacons }
      format.json { @beacons }
    end
  end

I try to use javascript:

$(document).ready(function() {
    $.get("beacons.json", function(data){
      $("#progressbar").css('width', data.power+'%')
    }
    });
});

and it doesn't work , what wrong with my setting?

via Chebli Mohamed