Nested JQuery Toggles

Trying to figure out the algorithm, so close!

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
EXAMPLE:
<br />
<ul id="list">
  <li class="active" style="list-style: none; margin-left: -3%;"> Header Receipt ID: 1
    <br>
    <br> Customer Reference: XX
    <br> Business ID: XXXX <span class="btn-expand">[View Less]</span>
    <div class="expand" style="display: block;">
      <br> Business Name: XXXXXXXX
      <br><span class="activee">Address Line 1: XXXXXXXXXXXXXX <br> Address Line 2: XXXXXXXXXXXXXX <br>Address Type: Invoice Addresses <br>  </span> <span class="hidden">Address Line 1: T &amp; ADDRESS <br> Address Line 2: XXXXXXXXXXXXXXXX <br>Address Type: XXXXXXXXXXXXXXXXXX <br>  </span>
      <br><span class="btn btn-span"> Next Address --> </span> </div>
    <br>Receipt ID: XXXXXXXx
    <br> User: XXXXX
    <br> Due Date: 08/04/2009 00:00:00
    <br>
    <br> Total: 343.6100 GBP
    <br> Discout: 0 GBP
    <br>
  </li>
  <li style="list-style: none; margin-left: -3%;" class=""> Header Receipt ID: 2
    <br>
    <br> Customer Reference: 64
    <br> Business ID: XXXXX <span class="btn-expand">[View Less]</span>
    <div class="expand" style="display: block;">
      <br> Business Name: XXXXXXXXXXXXXt;
      <br><span class="activee">Address Line 1: LTD <br> Address Line 2: UNIT 5/6 <br>Address Type: Delivery Addresses <br>  </span> <span class="hidden">Address Line 1: XXXX LTD <br> Address Line 2: UNIT 8/9 <br>Address Type: Invoice Addresses <br>  </span>
      <br><span class="btn btn-span"> Next Address --> </span> </div>
    <br>Receipt ID: 194
    <br> User: XXXXXXXXXXX
    <br> Due Date: 08/04/2009 00:00:00
    <br>
    <br> Total: 38.6400 GBP
    <br> Discout: 0 GBP
    <br>
  </li>
  <span class="btn" id="btn-prev"> Prev </span> | <span class="btn" id="btn-next"> Next </span>
</ul>
<!-- this is an example, the value is automatically added and is not constant -->
<input type="hidden" value="2,2" id="amount-of-addr" />

CSS

body {
  background: #efefef;
}

.activee {
  display: block !important;
}

.hidden {
  display: none;
}

#admin-content {
  display: none;
}

#addrNext {
  border: none !important;
}

.btn {
  background: #efefef;
  padding: 5px;
  border: 1px solid #000;
  border-radius: 3px;
  cursor: pointer;
}

li {
  padding: 10px;
  display: none;
}

.active {
  display: block !important;
}

.border {
  padding: 10px;
  border: 1px solid #000;
}

.expand {
  display: none;
}

.btn-expand {
  cursor: pointer;
  font-size: 11px;
}

JavaScript

$(document).ready(function() {

  var how = document.getElementById("amount-of-addr").value;
  howMany = how.split(",");
  var leng = howMany.length;
  var num = {};
  for (i = 0; i == leng; i++) {
    num.push(0);
  }
  var idx = 0;

  $(".btn-span").click(function() {
    if (howMany[idx] != num[idx]) {
      $(".activee").eq(idx).addClass("hidden");
      $(".activee").eq(idx).removeClass("activee").next().addClass("activee");
      num[idx]++;
    } else {
      $(".activee").eq(idx).addClass("hidden");
      $(".activee").eq(idx).removeClass("activee").prev().addClass("activee");
      alert("Sorry, there is no more addresses to show...");
      num[idx]--;
    }
  });

  $("#btn-next").click(function() {
    var $list = $("#list li");
    idx = $(".active").removeClass("active").next().index();
    if (idx == -1) {
      idx = 0;
    }
    $list.eq(idx).addClass("active");
  });


  $("#btn-prev").click(function() {
    var $list = $("#list li");
    idx = $(".active").removeClass("active").prev().index();
    if (idx == -1) {
      idx = 0;
    }
    $list.eq(idx).addClass("active");
  });

  $(".btn-expand").click(function() {
    $(this).next().toggle();
    $(this).text(function(_, oldText) {
      return oldText.indexOf('More') === -1 ? '[View More]' : '[View Less]';
    })
  });
});