css - Knockout js star rating "value not get cleared" -

i using knockout js star binding.its working first time when page loaded.when select 2 star out of 5 start first time gives me value correctly,after value not cleared , cant able select of stars.need in it.

ko.bindinghandlers.starrating = {  init: function (element, valueaccessor) {   console.log(valueaccessor);    $(element).addclass("starrating");      (var = 0; < 5; i++)       $("<span>").appendto(element);         $("span", element).each(function (index) {             $(this).hover(                 function () { $(this).prevall().add(this).addclass("hoverchosen") },                 function () { $(this).prevall().add(this).removeclass("hoverchosen") }             ).click(function () {                 var observable = valueaccessor();                 console.log(observable)                 observable(index + 1);                 window.localstorage.setitem("star", observable());             });         });       },       update: function (element, valueaccessor) {         var observable = valueaccessor();         $("span", element).each(function (index) {             $(this).toggleclass("chosen", index < observable());         });       }     };    //html   <div id="divstarrating">   <span id="feedstar" data-bind="starrating: userfeedpoints"> </span>             </div>    //css   .starrating span {  width: 24px;  height: 24px;  background-image: url(../star.png);  display: inline-block;  cursor: pointer;  background-position: -24px 0;  }   .starrating span.chosen {     background-position: 0 0;  }   .starrating:hover span {  background-position: -24px 0;    transform: rotate(-15deg) scale(1.3);  }   .starrating:hover span.hoverchosen {      background-position: 0 0;      transform: rotate(-15deg) scale(1.3);   } 

the value updates expected me. commented out localstorage because that's forbidden in snippet.

ko.bindinghandlers.starrating = {    init: function(element, valueaccessor) {      console.log(valueaccessor);      $(element).addclass("starrating");      (var = 0; < 5; i++)        $("<span>").appendto(element);      $("span", element).each(function(index) {        $(this).hover(          function() {            $(this).prevall().add(this).addclass("hoverchosen")          },          function() {            $(this).prevall().add(this).removeclass("hoverchosen")          }        ).click(function() {          var observable = valueaccessor();          console.log(observable)          observable(index + 1);          //window.localstorage.setitem("star", observable());        });      });    },    update: function(element, valueaccessor) {      var observable = valueaccessor();      $("span", element).each(function(index) {        $(this).toggleclass("chosen", index < observable());      });    }  };    ko.applybindings({    userfeedpoints: ko.observable()  });

.starrating span {    width: 24px;    height: 24px;    background-color: red;    background-image: url(https://upload.wikimedia.org/wikipedia/en/e/e5/yellow_star.png);    display: inline-block;    cursor: pointer;    background-position: -24px 0;  }    .starrating span.chosen {    background-position: 0 0;  }    .starrating:hover span {    background-position: -24px 0;    transform: rotate(-15deg) scale(1.3);  }    .starrating:hover span.hoverchosen {    background-position: 0 0;    transform: rotate(-15deg) scale(1.3);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>  <div id="divstarrating">    <span id="feedstar" data-bind="starrating: userfeedpoints"> </span>    <div data-bind="text: userfeedpoints"></div>  </div>