Problems w/ .replaceWith...Am I using the right method

Problems w/ .replaceWith...Am I using the right method

I'm trying to make a button that changes its text and function each time it is clicked. First it hides and replaces an element, and even brings it back once, but refuses to hide it again. I'd it to do it ad infinitum. Any help or resource on this would be beyond appreciated. Thanks!

<button id="hide">Hide
</button>
<script>
$("#hide").click(function () {
$("canvas").hide("slow");
$("#hide").replaceWith('<button id="display">Show');
$("#display").click(function () {
$("canvas").show("slow");
$("#display").replaceWith('<button id="hide">Hide');
})
}); 
</script>