Create a hash of radio buttons that are active among a Twitter Bootstrap Button group on click
===

I have multiple groups of [Twitter Bootstrap radio groups][1]. I would like to create a hash of all active buttons when any one of the radio buttons are clicked. Suppose the html is like so:

    <div id="horizontal" class="btn-group" data-toggle="buttons-radio">
      <button class="btn active" data-hposition="1">Left</button>
      <button class="btn" data-hposition="2">Middle</button>
      <button class="btn active"data-hpositoin="3">Right</button>
    </div>
    <div id="vertical" class="btn-group" data-toggle="buttons-radio">
      <button class="btn" data-vposition="1">Top</button>
      <button class="btn active" data-vposition="2">Center</button>
      <button class="btn active" data-vposition="3">Bottom</button>
    </div>

I started out simple with just one div but I don't get the right result:

    <script>
      $('#horizonatal').click( function(){
          var paramsHash = {};
          var hids = [];
        $('.active').each( function() {
          paramsHash.hids.push($(this).data('hposition'));
          names.push($(this).data('classroom'));
      })
          console.log(paramsHash.hids);    
    })
    </script>

Using the above html, when I click on "Right" I get something like `[1,undefined]` in the console.

Eventually, I would like to get a hash to Post like `{ {'hids', [ 1, 3 ]}, {'vids', [  2, 3, ]} }`


I attempted a [jsfiddle][2] but I don't think I am loading the Bootstrap stuff properly because I don't see the buttons going to active.


  [1]: http://twitter.github.com/bootstrap/javascript.html
  [2]: http://jsfiddle.net/YGxxC/