Um id deve ser único em uma página (leia aqui e aqui).
É claro que se tiver mais de um elemento com o mesmo id, vai “funcionar”: o browser não vai reclamar e a página será renderizada sem problemas. Mas vale lembrar que os browsers são bem permissivos e aceitam HTML inválido, mal-formado (com tags faltando, etc), então somente “funcionou” não deveria ser um critério para determinar que você fez tudo certo 
O problema é que getElementById retorna apenas um elemento (o primeiro que for encontrado), então se tiver mais de um elemento com o mesmo id, você não conseguirá obter todos. Esse é um bom motivo para não repetir id's
Você pode então colocar a mesma class nos elementos (como foi sugerido acima pelo @wldomiciano ), ou então adaptar a estrutura do seu HTML. Tem várias formas de fazer, uma delas seria colocar o id no elemento pai, e aí você busca somente os elementos span dentro dele. Ex:
<a id="cargo">
<span class="block m-t-xs font-bold font-color-white">Dwight Schrute</span>
<span class="text-muted text-xs block mr-2"></span>
<span class="text-muted text-xs block mr-2"></span>
</a>
E no JavaScript você busca pelo id="cargo", e depois busca os span's que você quer modificar:
// elemento que tem o id cargo
var a = document.getElementById('cargo');
// busca os span's dentro dele com o class text-muted
for (var span of a.querySelectorAll('span.text-muted')) {
span.innerHTML = 'texto';
}
No exemplo acima, eu primeiro pego o a (pois ele tem o id="cargo"), e depois pego somente os span's que estão dentro dele, e que tem a classe text-muted.
