title: jquery issue using multiple selector in Animated Circle Menu
body: <p>i am using Animated Circle Menu that works for one menus , but when using multiple one i could not make it work</p>
  
  <p>working one with one selector menu :
  <a href="https://jsfiddle.net/gruts8Lv/2/" rel="nofollow">https://jsfiddle.net/gruts8Lv/2/</a></p>
  
  <p>not working with two selector :
  <a href="https://jsfiddle.net/6ft5cjj6/7/" rel="nofollow">https://jsfiddle.net/6ft5cjj6/7/</a></p>
  
  <p>working code:</p>
  
  <p>html :</p>
  
  <pre><code>&lt;div class='selector' style="width:80px;height:80px"&gt;
    &lt;ul&gt;
          &lt;li&gt;
        &lt;input id='c1' type='checkbox'&gt;
        &lt;label for='c1' &gt;Menu&lt;/label&gt;
      &lt;/li&gt;
          &lt;li&gt;
        &lt;input id='c2' type='checkbox'&gt;
        &lt;label for='c2' &gt;Menu&lt;/label&gt;
      &lt;/li&gt;
          &lt;li&gt;
        &lt;input id='c3' type='checkbox'&gt;
        &lt;label for='c3' &gt;Menu&lt;/label&gt;
      &lt;/li&gt;
          &lt;li&gt;
        &lt;input id='c4' type='checkbox'&gt;
        &lt;label for='c4' &gt;Menu&lt;/label&gt;
      &lt;/li&gt;
          &lt;li&gt;
        &lt;input id='c5' type='checkbox'&gt;
        &lt;label for='c5' &gt;Menu&lt;/label&gt;
      &lt;/li&gt;
          &lt;li&gt;
        &lt;input id='c6' type='checkbox'&gt;
        &lt;label for='c6' &gt;Menu&lt;/label&gt;
      &lt;/li&gt;
          &lt;li&gt;
        &lt;input id='c7' type='checkbox'&gt;
        &lt;label for='c7' &gt;Menu &lt;/label&gt;
      &lt;/li&gt;
        &lt;/ul&gt;
    &lt;button&gt;Click 1&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>html,
  body { height: 100%; }
  
  body {
    margin: 0;
    background: linear-gradient(#eeeeee, #cccccc);
    overflow: hidden;
  }
  
  .selector {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140px;
    height: 140px;
    margin-top: -70px;
    margin-left: -70px;
  }
  
  .selector,
  .selector button {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
  }
  
  .selector button {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #428bca;
    border-radius: 50%;
    border: 0;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    transition: all .1s;
  }
  
  .selector button:hover { background: #3071a9; }
  
  .selector button:focus { outline: none; }
  
  .selector ul {
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
  }
  
  .selector li {
    position: absolute;
    width: 0;
    height: 100%;
    margin: 0 50%;
    -webkit-transform: rotate(-360deg);
    transition: all 0.8s ease-in-out;
  }
  
  .selector li input { display: none; }
  
  .selector li input + label {
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 0;
    height: 0;
    line-height: 1px;
    margin-left: 0;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 1px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
  }
  
  .selector li input + label:hover { background: #f0f0f0; }
  
  .selector li input:checked + label {
    background: #5cb85c;
    color: white;
  }
  
  .selector li input:checked + label:hover { background: #449d44; }
  
  .selector.open li input + label {
    width: 140px;
    height: 140px;
    line-height: 140px;
    margin-left: -40px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    font-size: 14px;
  }
  </code></pre>
  
  <p>js code: </p>
  
  <pre><code>var angleStart = -360;
  
  // jquery rotate animation
  function rotate(li,d) {
      $({d:angleStart}).animate({d:d}, {
          step: function(now) {
              $(li)
                 .css({ transform: 'rotate('+now+'deg)' })
                 .find('label')
                    .css({ transform: 'rotate('+(-now)+'deg)' });
          }, duration: 0
      });
  }
  
  // show / hide the options
  function toggleOptions(s) {
      $(s).toggleClass('open');
      var li = $(s).find('li');
      var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
      for(var i=0; i&lt;li.length; i++) {
          var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
          $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
      }
  }
  
  $('.selector button').click(function(e) {
      toggleOptions($(this).parent());
  });
  
  setTimeout(function() { toggleOptions('.selector'); }, 100);
  </code></pre>
  
  <p>when i change my html code to add on more selector it does not work pls help me to fix it</p>