Add class depending on JSON data
<p>With dynamically generated HTML from JSON data I'm trying to add a class to each <code>.status-card</code>, in this case depending on the value of <code>c.callStatus</code>. This is the closest I got, but this just adds <code>active</code> class to all <code>status-card</code>. I'm guessing it's something to do with how I'm using <code>$(this)</code> or I'm missing something else?       </p>

<pre><code>$(function() {
    var agents = [];
    $.getJSON('js/agents.json', function(a) {
        $.each(a.agents, function(b, c) {
            var content = 
            '&lt;div class="status-card"&gt;' +
            '&lt;div class="agent-details"&gt;' +
            '&lt;span class="agent-name"&gt;' + c.name + '&lt;/span&gt;' +
            '&lt;span class="handling-state"&gt;' + c.callStatus + '&lt;/span&gt;' +
            '&lt;span class="handling-time"&gt;' + c.handlingTime + '&lt;/span&gt;' +
            '&lt;/div&gt;' +
            '&lt;div class="status-indicator"&gt;&lt;/div&gt;' +
            '&lt;/div&gt;'
            $(content).appendTo('#left');

            //Add class depending on callStatus
            $('.status-card').each(function() {
              if (c.callStatus == 'On Call') {
                $(this).removeClass('idle away').addClass('active');
              } else if (c.callStatus == 'Idle') {
                $(this).removeClass('active away').addClass('idle');
              } else {
                $(this).removeClass('active idle').addClass('away');
              }
              console.log(c.callStatus);
            });
        });

    });

});
</code></pre>

<p>Thanks!</p>