Appending JSON Object Number - Troubleshooting

How would I go about correctly inputting a number from an array of objects, only once into the html content?

Ideally, I want the object's "category" number to inputted after the last span with in the .viewed class. The end result would then follow something along the lines of..

Joseph Michaels and 3 more people have viewed this post. #4

An example of the JSON file:

{
  "profiles": [
    { "firstName" : "John", "lastName" : "Doe", "gender": "male", "category": 2 },
    { "firstName" : "Jane", "lastName" : "Austen", "gender": "female", "category": 2 },
    { "firstName" : "Alexander", "lastName" : "Beth", "gender": "male", "category": 3 },
    { "firstName" : "Sarah", "lastName" : "Kelly", "gender": "female", "category": 3 },
    { "firstName" : "Rachel", "lastName" : "Haiworth", "gender": "female", "category": 3 },
    { "firstName" : "Thomas", "lastName" : "Alfae", "gender": "male", "category": 3 },
    { "firstName" : "Roy", "lastName" : "Harper", "gender": "male", "category": 4 },
    { "firstName" : "Joseph", "lastName" : "Michaels", "gender": "male", "category": 4 },
    { "firstName" : "William", "lastName" : "Lee", "gender": "male", "category": 4 }
  ]
}

A portion of the JS file:

if (obj.category == 4) {
    $('.contentBox:nth-child(4) .viewed').append('<span class="user">' + obj.firstName + ' ' + obj.lastName + '</span>' + ' ');
    $('.contentBox:nth-child(4) .viewed span:last-child').append('<span class="categoryNumber">' + obj.category + '</span>');

    //$('.contentBox:nth-child(4) .viewed').append('<span class="categoryNumber">' + obj.category + '</span>');
}

Currently the code is inputting <span class="categoryNumber"></span> multiple times into the one line. Therefore, the category number is displaying multiples times.

What is the best solution for this situation?

View the current Plunker.