javascript - update multiple vertical bars -

i'm trying come html , javascript update multiple vertical bars. i've been able work 1 bar following:

javascript

$('#inner').animate({height: + math.floor(math.random()*100) + "%"},500); 

css

#outer { width: 15px; height: 140px; border: 2px solid #ccc; overflow: hidden; position: relative; }  #inner, #inner div { width: 100%; overflow: hidden; left: -2px; position: absolute; }  #inner { border: 2px solid #000; border-top-width: 0; background-color: #090;  bottom: 0; height: 0%; }  #inner div { border: 1px solid red; border-bottom-width: 0; background-color: orange;  top: 0; width: 100%; height: 5px; } 

html

<div id="outer>      <div id="inner">      <div>height:'0%'</div>      </div>  </div> 

what want have multiple bars updated like:

javascript

var number_of_bars=30; (var i=0; i<number_of_bars; i++) {     $('#inner_'+ i).html('height:' + math.floor(math.random()*100) + "%"); } 

but need have reference specific individual divs. can help?

here working demo js-fiddle

the javascript not optimal , have copied code.

js

function reload(){     $('.inner').each(function(){         $(this).animate({         height: +math.floor(math.random() * 100) + "%"         }, 500);     }); };  setinterval(reload, 1000); 

html

<ul id="outer">      <li style="height:100%;width:1px">&nbsp;</li>     <li class="inner">         <div>height:'0%'</div>     </li>     <li class="inner">         <div>height:'0%'</div>     </li>     <li class="inner">         <div>height:'0%'</div>     </li>     <li class="inner">         <div>height:'0%'</div>     </li>     <li class="inner">         <div>height:'0%'</div>     </li>     <li class="inner">         <div>height:'0%'</div>     </li>     <li class="inner">         <div>height:'0%'</div>     </li> </ul> 

css

#outer {     border: 2px solid #cccccc;     height: 140px;     overflow: hidden;     padding: 0;     position: relative; }  #outer li {     border: 1px solid lightgray;     display: inline-block;     height: 99%;     overflow: hidden;     position: inherit;     width: 15px;     background-color:green; }  #outer li div{         bottom: 0;     height: 0px;     position: absolute;    }