duplicate checkboxes table row and sum the value of each checked javascript

I have this table i'm working on When you check the checkboxes on each table, it adds to another table specified below but to sum the values of each checkboxes checked is the problem because if i check a checkbox, it would sum the wrong value and show and if i uncheck and check again, it would still adds to the total without removing the previous uncheck value from the total, But adding to another table below is working fine, its only the sum of the total value that gives the problem

Below is my html table

<table class="table table-hover">
        <thead style="background-color: rgb(25, 96, 143); color: #fff;" id="feesTbl">
          <tr>
            <th></th>
            <th>Fee Name</th>
            <th>Fee Amount</th>
          </tr>
        </thead>

        <tbody>
          <form method="post" action="">
            <tr data-index="1">
              <td>
                <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
              </td>
              <td>
                CAC Fine Fees
              </td>
              <td>
                10000
              </td>
            </tr>
            <tr data-index="2">
              <td>
                <input type="checkbox" class="checky" name="feeids" value="100000" data-check-name="PowerHouse Water Cooper">
              </td>
              <td>
                PowerHouse Water Cooper
              </td>
              <td>
                100000
              </td>
            </tr>
            <tr data-index="3">
              <td>
                <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
              </td>
              <td>
                CAC Fine Fees
              </td>

              <td>
                10000
              </td>
            </tr>
            <tr data-index="4">
              <td>
                <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
              </td>
              <td>
                CAC Fine Fees
              </td>
              <td>
                10000
              </td>
            </tr>
            <tr data-index="5">
              <td>
                <input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
              </td>
              <td>
                CAC Fine Fees
              </td>
              <td>
                10000
              </td>
            </tr>
          </form>
        </tbody>
      </table>
      <div id="showTotal">
          <form action="" method="POST">
             <input type="text" id="total" class="form-control" />
          </form>
      </div>
      <table id="tbl2">

      </table>

Below is the jquery code

      // $("#showTotal").hide();
      var total = 0;
      var $checky = $("input[type=checkbox].checky");

      $checky.click(function(){
        //calculateTotal();
        if($(this).is(":checked")) {
            calculateTotal();
            $(this).closest("tr").clone().appendTo("#tbl2");


        }else {
          var index = $(this).closest("tr").attr("data-index");
          var findRow = $("#tbl2 tr[data-index='" + index + "']");
          findRow.remove();
        }
      });
      function calculateTotal()
      {
        //if($(this).is(":checked")) {
          $checky.each(function(){
              total = parseFloat(total) + parseFloat($(this).val());
              // if(total != 0) {
              //     $("#showTotal").show();
              // }else {
              //     $("#showTotal").hide();
              // }
              $("#total").val("N" + total);
          });
        //}


      }


  });