change a span class in jQuery based on page changes

Question

I have a chat fontawesome icon currently coded as:

<li class="hidden-xs"><a href="#" class="right-bar-toggle waves-effect">
<i class="fa fa-comments "></i>
</a></li>

I want a span class with counter to display when new chat message arrives as follows:

<li class="hidden-xs"><a href="#" class="right-bar-toggle waves-effect"><i class="fa fa-comments "></i>
<span class="badge badge-xs badge-danger">3</span>
</a></li>

3 is an example of unread chat message counter.

Selected portions of my javascript code are as follows:

var msgHistory = document.querySelector('#history');
var msg = document.createElement('p');
msg.innerHTML = name + ': ' + event.data;
msg.className = event.from.connectionId === session.connection.connectionId ? 'mine' : 'theirs';

The chat is displayed in:

<p id="history"></p>

and css are as follows:

#history {
     width: 100%;
     height: calc(100% - 40px);
     overflow: auto;
}

#history .mine {
    color: #07715b;
    text-align: left;
    margin-left: 10px;
}
#history .theirs {
    color: #4398db;
    text-align: left;
    margin-left: 10px;
}

The chat html will display as:

<p id="history">
<p class="mine">Me: Hi</p>
<p class="theirs">User-1: Hello</p>
<p class="mine">Me: I am testing</p>
<p class="theirs">User-1: Okay</p>
</p>

1. I want to enable the span class= badge and count of <p class="theirs"> being displayed on badge, when another user enters a message.
2. The span class= badge needs to be disabled and counter reset when <p class="mine"> is set. That is once i enter a message.
3. The span class= badge and counter needs to display again when new message arrives on <p class="theirs">

How is it possible with jQuery? Thanks in advance.