根据页面更改更改jQuery中的span类

Question

我有一个聊天fontawesome图标，目前编码为：

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

我想要一个带有计数器的span类，当新的聊天消息到达时显示如下：

<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 是未读聊天消息计数器的示例。

我的javascript代码的选定部分如下：

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';

聊天显示在：

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

和css如下：

#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;
}

聊天html将显示为：

<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. 当其他用户输入消息时，我想启用徽章上显示的span class = badge和<p class="theirs">的数量。
2. 设置<p class="mine">时，需要禁用span class = badge并重置计数器。这是我输入一条消息。
3. 当新邮件到达<p class="theirs">
时，需要再次显示范围类=徽章和计数器

jQuery怎么可能？提前致谢。