Bootstrap Modal Doesn't Toggle after Replacing HTML

Question

A simple example on CodePen: https://codepen.io/xanabobana/pen/oNxwgzX

The workflow is:

1. Click +Add News Article - News modal pops up
2. Click Upload New Image - News modal is closed, HTML from it is saved, upload image modal is opened
3. Close the Upload Image modal using the "Close" button at the bottom - News modal opens again with saved HTML
4. Try to click Upload New Image again, this time nothing happens

What am I doing wrong?

here is the code:

var newsModalHTML = $("#newsModalDiv").html();

//replace news modal with image modal when adding a new image
    $("#newImageButton").click(function() {
        newsModalHTML = $("#newsModalDiv").html();
        $("#newsModal").modal('toggle');
        $("#newFileModal").modal('toggle');
    });
    
//show the news modal when the file modal is closed
    $("#closeUploadFile").click(function() {
        $("#newsModalDiv").html(newsModalHTML);
        $("#newsModal").modal('toggle');
        $('#fldNewTitle').focus();
    });

<button type="button" data-toggle="modal" data-target="#newsModal">+Add News Article</button>

<!--hidden edit article div-->
 <div id="newsModalDiv" style="max-height:90%; overflow:scroll;">
 <div class="modal fade" id="newsModal" tabindex="-1" role="dialog" aria-labelledby="newFileModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content modalwidth">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="newFileModalLabel">Edit News Article</h4>
      </div>
      <div class="modal-body">
<button type="button" id="newImageButton">Upload New Image</button>
      </div>
      <div class="modal-footer">
        <span style="float:right"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="newArticleSubmit">Save</button></span></div>
      </div>
    </div>
  </div>
</div>
</div>

<!--hidden upload image div-->
<div id="newFileModalDiv">
 <div class="modal fade" id="newFileModal" role="dialog" aria-labelledby="newFileModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content modalwidth">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="newFileModalLabel">Upload a New Image</h4>
      </div>
      <div class="modal-body">
        <section class="col-md-12">
            <article>
                <p>Use this form to upload an image to the database for the current project.</p><br>
              
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeUploadFile">Close</button>
        <button type="button" class="btn btn-primary" id="submitNewFile">Upload Image</button>
      </div>
    </div>
  </div>
</div>
</div>