title: Bootstrap star-rating shown two times
body: <p>I am using this <a href="https://github.com/kartik-v/bootstrap-star-rating" rel="nofollow noreferrer">plugin</a> to show star rating on my Bootstrap website. Here is part of the modal code in which I put the star rating (see the input element):</p>
  
  <pre><code>      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="userTitle"&gt;&lt;/h4&gt;
          &lt;input id="avg" class="rating" min=0 max=5 step=0.1 data-size="xs" data-readonly="true" data-show-clear="false" data-show-caption="false"&gt;
          &lt;small id="tot_reviews"&gt;&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
  </code></pre>
  
  <p>Here is the part of JS code in which I dynamically set the value of the stars:</p>
  
  <pre><code>$.getJSON("getData.php?rating=" + user.id, function(data) {
      if (data) {
          $.each(data, function(key, val) {
              var reviews = val.tot_reviews;
  
              $('#avg').rating('update', val.average);
              $("#tot_reviews").html("(" + reviews + " reviews)").html();
          });
      }
  });
  </code></pre>
  
  <p>It seems to work well, in fact when I click on an item of the page I get this:</p>
  
  <p><img src="https://i.stack.imgur.com/rqPHB.png" alt="enter image description here"></p>
  
  <p>If I click again on the same item I get this:</p>
  
  <p><img src="https://i.stack.imgur.com/AJ2eE.png" alt="enter image description here"></p>
  
  <p>I can't figure out why this happens.</p>