Recent contacts view on home screen

Hi guys, I've added some logic to create the recent contacts view. It took me a while and a lot of searching to create this functionality. With this branch, recent contacts are parsed in home.js, and listed out in descending order by the number of occurrence (the more common a name appears on screen, the higher it is on the list).
The number of contacts is limited to 5 and the user's own name is omitted from the list.

 However, there is still a part where I still don't understand (I know, I coded this up O_o). Particularly between line 124 to 134 of home.js. 
Hopefully y'all can shed some light on this and review the PR in the meantime!

Cheers! :smiley: 
@psybuzz I definitely agree it should be more concise and less redundant if possible, but I'm not sure how the things you described work. I've tried a few times, to no avail.

*" you could move the counting logic to **here***." 

Is **here** referring to where the code for the sort function you wrote is at?

How do we add those ``<span class="name" data-id="..."></span>`` html elements to the array you mentioned? The only I can think of is using a for loop, using ``i < $name.length`` as the stopper. This is because neither ``$('.name')`` nor ``$('.name').each()``, seem to work. When I used ``$(name)`` I got an array of ``[n.fn.init[25]]``, with another ``[n.fn.init[25]]``, nest inside. This I think is a jQuery prototype thing. I feel like I'm going down a rabbit hole, not sure how to proceed.

Even if I can write this for loop, it is still a lot of code, it doesn't seem to be right in the light of the code reduction you alluded to. 

I'm lost, perhaps you can enlighten me on this? Maybe write out the actual code instead of just similar examples? Thanks!