loop de botão com javascript

galera, tudo bem? Então é muito fora da minha area de atuação javascript, então preciso de ajuda para algo que é bem simples de se fazer com java, ou c, mas como não atuo com javascript não consigo fazer, eu estou desenvolvendo um player, mas preciso fazer com que o botão de player e stop seja sempre ativo, digo da seguinte forma, quando a pessoa carrega o player ele vem com o botão de de player aparecendo, mas se clicar da stop, e o botão de player fica com a imagem do stop e a musica para, isso eu consigofazer, o problema é quando o cara tenta da play para escutar novamente, minha função falta um loop que sempre inverte, oque eu tenho é o seguinte:

function PlayerPlay(){
 document.getElementById('player2').muted = false;
 event.preventDefault();
 $("#pause").css({"transition":"1s","display":"block", "z-index":"2"});
 }
 function PlayerPause(){
 document.getElementById('player2').muted = true;
 event.preventDefault();
 $("#play").css({"transition":"1s","display":"block", "z-index":"1"});
 }

	botão

<td colspan="2">
 <a onclick="PlayerPause()" id="pause"></a>
 <a onclick="PlayerPlay()" id="play"></a>
 <!-- -->
 </td>

	então se vocês conseguiram entender a gambiarra, mas para quem não vou explicar, eu fiz as duas funções, e tem dois botoes, porem um vem com z-index inferior e aparece atras do outro, e quando clica ele recebe um z-index maior, é provavelmente errado isso, como eu deveria fazer?