Локальное хранилище Jquery не работает после посещения?

Вот мой HTML

<div class="col-md-9">
  <table class="table table-striped table-bordered table-condensed">
    <thead>
      <tr style="background-color: white">
        <th> <i class="fa fa-male"></i> Name </th>
        <th><i class="fa fa-bars"></i> Particular</th>
        <th><i class="fa fa-envelope-o"></i>Unit</th>
        <th><i class="fa fa-map-marker"></i>Quantity</th>
        <th><i class="fa fa-phone"></i>From</th>
        <th><i class="fa fa-phone"></i>Date</th>
        <th><i class="fa fa-phone"></i>TAKE actions</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>COMB</td>
        <td>fasionable comb</td>
        <td>SVP</td>
        <td>3</td>
        <td>Bindibhatt1</td>
        <td>2014-03-22 18:15:34 UTC
        </td><td>
          <form action="/requisitions/2" class="button_to" method="get"><div><input class="po" data-confirm="Are you sure?" type="submit" ></div></form>

        </td>
      </tr>
      <tr>
      </tr>
    </tbody>
  </table>

</div>

И вот мой JQ

$(window).load(function(){

    $(".po").click(function(){
        localStorage.setItem("visited" + $(this).index(), true);
        $(this).css("color", "red"); // visited
    });

    for(var i = 0, len = $(".po").length; i < len; i++){

        if(localStorage.getItem("visited" + i)){
            $(".po:eq(" + i + ")").css("color", "white"); // visited
        }else
        {
            $(".po:eq(" + i + ")").css("color", "black"); // not visited
        }
    }

});

Проблема заключается в том, что изменения можно увидеть только в первой строке, без эффекта, когда я добавляю другую строку, а затем нажимаю на нее