JQuery нужно переключать текст при нажатии и переключаться обратно при повторном нажатии

Question

Я могу получить одно изменение, но не второе, не уверен, связано ли это с document.ready, и мне нужно другое значение?

$(document).ready(function() {
  $("#pause").click(function() {
    $("#stopme").attr('value', 'Resume');
    document.getElementById('stopme').id = 'resumeme';
    document.getElementById('pause').id = 'resume';
  });

});
$(document).ready(function() {
  $("#resume").click(function() {
    $("#resumeme").attr('value', 'Pause Boxes');
    document.getElementById('resumeme').id = 'stopme';
    document.getElementById('resume').id = 'pause';
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0);" id="pause"> <input type="button" value="Pause Boxes" class="btn btn-primary btn-lg" id="stopme"> </a>