Leaderboard with Local Storage with JavaScript & jQuery

<!DOCTYPE html>
<html>
  <head>
    <title>Leaderboard with Local Storage with JavaScript & jQuery</title>
  </head>
  <link href="style.css" rel="stylesheet" type="text/css">
  <body>
    <h1>Leaderboard</h1>
      <div class="person" style="display: none;">
        <span class="name">...</span>
        <span class="points">...</span>
        <span class="input hidden">
          <input type="number">
        </span>
      </div>
    <div id="ppl">

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>


var $$ = {
  storeData: function() {
    localStorage["karma.data"] = JSON.stringify(this.data);
  },
  readData: function() {
    this.data = JSON.parse(localStorage["karma.data"]);
  },
  leaderboard: function() {
    return this.data.sort(this.compare);
  },
  compare: function (a, b){
    return b.points - a.points;
  },
  // modifyPointsFor(0, 2);
  modifyPointsFor: function(indexInArray, newPoints) {
    this.data[indexInArray].points = newPoints;
    this.storeData();
    this.cloner();
  },
  cloner: function(){
  $("#ppl").empty();
  var sorted = $$.leaderboard();
  var $template = $(".person:first"), $clonedLi;
  var ppl = sorted.map(function(p, i) {
    $clonedLi = $template.clone().show();
    $clonedLi.data("order", i);
    $clonedLi.find(".name").text(p.name);
    $clonedLi.find(".points").text(p.points);
    $clonedLi.find("input").val(p.points);
    return $clonedLi;
  });

  $("#ppl").append(ppl);

  },
  eventHandler: function(){
      $("#ppl").on("dblclick", ".points", function(event) {
          $(this).hide();
          $(this).parent(".person").find(".input").show(); //problem
      }).on("keyup", "input", function(event) {
        if (event.which === 13) {
            var person = $(this).parents(".person");
            var personIndex = person.data("order"); //problem
            var newVal = $(this).val();
            $$.modifyPointsFor(personIndex, newVal); 
            $(this).parent().prev(".points").text(newVal); //problem
            $(this).parent().hide(); //problem
            $(".points").show();

        }
      });

  },

  data: []
}


$(document).ready(function() {
  $$.readData();
  $$.cloner();
  $$.eventHandler();


})


body {
  margin-left: 4em;
}

.person {
  margin: 0.5em;
  float: left;
  border: 1px solid #ddd;
  padding: 10px;
  width: 250px;
}

span.points {
  margin-left: 0.5em;
  border: 1px solid #939191;
  border-radius: 50%;
  width: 17px;
  display: inline-block;
  text-align: center;
  padding: 5px;
  background-color: #F4F1F1;
  float: right;
  cursor: pointer;
}

.points:hover {
  opacity: 0.6;
}

.name {
  font-size: 1.2em;
}

.input input {
  width: 30px;
  float: right;
}

.hidden{
  display: none;
}