How can I save the information when toggling for the element.empty() function

Question

$("#prop-info-nav-link").click(function() {
  $("#toggle-content-add-modal").empty();
  let output = '<div class="row g-0 justify-content-center prop-info-row"><div class="col-md-8 prop-info-col"><p style="font-weight: 600;">Property Type</p></div><div class="col-md-8 d-flex justify-content-center prop-info-col"><select name="property-types" id="property-types"><option value="volvo">Tenament</option><option value="saab">Car</option><option value="opel" selected>Helicopter</option><option value="audi">Space Shuttle</option></select><div class="input-group mb-3 ms-3"><span class="input-group-text" id="basic-addon1">OR</span><input type="text" class="form-control" id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off"></div></div><div class="col-md-8 d-flex justify-content-center prop-info-col mt-5"><input type="text" id="prop-name" class="add-inpt" placeholder="Property Name"></div><div class="col-md-8 d-flex justify-content-center prop-info-col mt-3"><input type="text" id="prop-address" class="add-inpt" placeholder="Property Address"></div></div>';
  $("#toggle-content-add-modal").html(output);
});

$("#img-nav-link").click(function() {
  $("#toggle-content-add-modal").empty();
  let output = '<!-- UPLOAD IMAGE SECTION --><div id="uploadArea" class="upload-area"><!-- Header --><div class="upload-area__header"><h1 class="upload-area__title">Upload your file</h1><p class="upload-area__paragraph">File should be an image<strong class="upload-area__tooltip">Like<span class="upload-area__tooltip-data"></span><!-- Data Will Come From Js --></strong></p></div><!-- End Header --><!-- Drop Zoon --><div id="dropZoon" class="upload-area__drop-zoon drop-zoon"><span class="drop-zoon__icon"><i class="bx bxs-file-image"></i></span><p class="drop-zoon__paragraph">Drop your file here or Click to browse</p><span id="loadingText" class="drop-zoon__loading-text">Please Wait</span><img src="" alt="Preview Image" id="previewImage" class="drop-zoon__preview-image" draggable="false"><input type="file" id="fileInput" class="drop-zoon__file-input" accept="image/*"></div><!-- End Drop Zoon --><!-- File Details --><div id="fileDetails" class="upload-area__file-details file-details"><div id="uploadedFile" class="uploaded-file"><div class="uploaded-file__icon-container"><i class="bx bxs-file-blank uploaded-file__icon"></i><span class="uploaded-file__icon-text"></span><!-- Data Will be Comes From Js --></div><div id="uploadedFileInfo" class="uploaded-file__info"><span class="uploaded-file__name">Project 1</span><span class="uploaded-file__counter">0%</span></div></div></div><!-- End File Details --></div></div><!-- End Upload Area -->';
  $("#toggle-content-add-modal").html(output);
});

$(function () {
    $(".side-nav li").click(function (e) {
        e.preventDefault();
        $(".side-nav li").removeClass("active");
        $(this).addClass("active");
    });
});

/* Add property modal */

.add-property {
  position: relative;
  width: 60rem;
  height: 35rem;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 15px;
}

.modal-title {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.close {
  background-color: transparent;
  border: none;
}

#footer-btn {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 0.1em solid black;
  border-radius: 10px;
  width: 5em;
  height: 2.5em;
  font-weight: 600;
  margin-bottom: 1.2em;
}

.add-prop {
  background-color: #3498db;
  color: white;
}

.add-prop:hover {
  background-color: rgb(12, 65, 180);
}

.add-inpt {
  outline: none;
  border-width: 0 0 0.17em;
  border-color: black;
  border-radius: 5px;
  width: 15em;
  height: 2em;
  text-align: center;
}

.prop-info-row {
  height: 15em;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.prop-info-col {
  height: 2em;
}

.add-inpt::placeholder {
  text-align: center;
}

.main-add-row {
  width: 50rem;
  height: 26rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}

#property-types {
  background-color: white;
  height: 2.5em;
  width: 13em;
  border-radius: 5px;
}

/* SIDE NAV INSIDE ADD PROPERTY MODAL */
.side-nav,
.nav-menu {
    height: 100%;
}

.side-nav .nav-menu {
    list-style: none;
    padding: 40px 0;
    width: 13em;
    background-color: #3498db;

}

.side-nav .nav-item {
    position: relative;
    padding: 0.7em 1.5em;
    position: relative;
    top: 42%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.nav-item.active {
    background-color: #fff;
    box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}

.nav-item.active a {
    color: #2980b9;
}

.nav-item a {
    text-decoration: none;
    color: #fff;
}

.menu-text {
    padding: 0 20px;
}

.side-nav .nav-item.active::before {
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-bottom-right-radius: 25px;
    box-shadow: 0 20px 0 0 #fff;
}

.side-nav .nav-item.active::after {
    content: "";
    position: absolute;
    background-color: transparent;
    top: 100%;
    right: 0;
    height: 150%;
    width: 20px;
    border-top-right-radius: 25px;
    box-shadow: 0 -20px 0 0 #fff;
}

/* UPLOAD IMAGE STYLE */
:root {
    --clr-white: rgb(255, 255, 255);
    --clr-black: rgb(0, 0, 0);
    --clr-light: rgb(245, 248, 255);
    --clr-light-gray: rgb(196, 195, 196);
    --clr-blue: rgb(63, 134, 255);
    --clr-light-blue: rgb(171, 202, 255);
}

/* End General Styles */

/* Upload Area */
.upload-area {
    width: 100%;
    max-width: 25rem;
    background-color: var(--clr-white);
    box-shadow: 0 5px 10px rgb(218, 229, 255);
    border: 2px solid var(--clr-light-blue);
    border-radius: 24px;
    padding: 1rem 1.875rem 0rem 1.875rem;
    margin: 0.625rem;
    text-align: center;
}

/* Header */
.upload-area__title {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin-top: 0;
}

.upload-area__tooltip {
    position: relative;
    color: var(--clr-light-blue);
    cursor: pointer;
    transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
    color: var(--clr-blue);
}

.upload-area__tooltip-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -125%);
    min-width: max-content;
    background-color: var(--clr-white);
    color: var(--clr-blue);
    border: 1px solid var(--clr-light-blue);
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: none 300ms ease-in-out;
    transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
    opacity: 1;
    visibility: visible;
}

/* Drop Zoon */
.upload-area__drop-zoon {
    position: relative;
    height: 13.8rem;
    /* 180px */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 2px dashed var(--clr-light-blue);
    border-radius: 15px;
    margin-top: 1.1rem;
    cursor: pointer;
    transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
    border-color: var(--clr-blue);
}

.drop-zoon__icon {
    display: flex;
    font-size: 3.75rem;
    color: var(--clr-blue);
    transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
    font-size: 0.9375rem;
    color: var(--clr-light-gray);
    margin: 0;
    margin-top: 0.625rem;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
    opacity: 0.7;
}

.drop-zoon__loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    color: var(--clr-light-blue);
    z-index: 10;
}

.drop-zoon__preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.3125rem;
    border-radius: 10px;
    display: none;
    z-index: 1000;
    transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
    opacity: 0.8;
}

.drop-zoon__file-input {
    display: none;
}

/* (drop-zoon--over) Modifier Class */
.drop-zoon--over {
    border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
    opacity: 0.7;
}

/* (drop-zoon--over) Modifier Class */

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
    display: none;
}

/* File Details Area */
.upload-area__file-details {
    height: 0;
    visibility: hidden;
    opacity: 0;
    text-align: left;
    transition: none 500ms ease-in-out;
    transition-property: opacity, visibility;
    transition-delay: 500ms;
}

/* (duploaded-file--open) Modifier Class */
.file-details--open {
    height: auto;
    visibility: visible;
    opacity: 1;
}

/* Uploaded File */
.uploaded-file {
    display: flex;
    align-items: center;
    padding: 0.925rem 0;
    visibility: hidden;
    opacity: 0;
    transition: none 500ms ease-in-out;
    transition-property: visibility, opacity;
}

/* (duploaded-file--open) Modifier Class */
.uploaded-file--open {
    visibility: visible;
    opacity: 1;
}

.uploaded-file__icon-container {
    position: relative;
    margin-right: 0.3125rem;
}

.uploaded-file__icon {
    font-size: 3.4375rem;
    color: var(--clr-blue);
}

.uploaded-file__icon-text {
    position: absolute;
    top: 1.5625rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--clr-white);
}

.uploaded-file__info {
    position: relative;
    top: -0.3125rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.uploaded-file__info::before,
.uploaded-file__info::after {
    content: '';
    position: absolute;
    bottom: -0.9375rem;
    width: 0;
    height: 0.5rem;
    background-color: #ebf2ff;
    border-radius: 0.625rem;
}

.uploaded-file__info::before {
    width: 100%;
}

.uploaded-file__info::after {
    width: 100%;
    background-color: var(--clr-blue);
}

/* Progress Animation */
.uploaded-file__info--active::after {
    animation: progressMove 800ms ease-in-out;
    animation-delay: 300ms;
}

@keyframes progressMove {
    from {
        width: 0%;
        background-color: transparent;
    }

    to {
        width: 100%;
        background-color: var(--clr-blue);
    }
}

.uploaded-file__name {
    width: 100%;
    max-width: 6.25rem;
    /* 100px */
    display: inline-block;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uploaded-file__counter {
    font-size: 1rem;
    color: var(--clr-light-gray);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty" class="add-more" id="add-property">Add
            Property</button>

<!-- Modal window for Add Property button -->
<form action="">
  <div class="modal fade" id="ModalAddProperty" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content add-property">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Add Property</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fas fa-times"></i>
                        </button>
        </div>
        <div class="modal-body" style="padding: 0;">
          <div class="row g-0 main-add-row">

            <div class="col-sm-3" style="padding: 0;">
              <nav class="side-nav">
                <ul class="nav-menu">
                  <li class="nav-item active" id="img-nav-link">
                    <a href="#">
                      <i class="fa-solid fa-file-arrow-up"></i>
                      <span class="menu-text">Upload Image</span>
                    </a>
                  </li>
                  <li class="nav-item" id="prop-info-nav-link">
                    <a href="#">
                      <i class="fa-solid fa-house-chimney-crack"></i>
                      <span class="menu-text">Propery Info</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>


            <div class="col-md-9 d-flex justify-content-center" id="toggle-content-add-modal">
              <!-- UPLOAD IMAGE SECTION -->
              <div id="uploadArea" class="upload-area">
                <!-- Header -->
                <div class="upload-area__header">
                  <h1 class="upload-area__title">Upload your file</h1>
                  <p class="upload-area__paragraph">
                    File should be an image
                    <strong class="upload-area__tooltip">
                                                Like
                                                <span class="upload-area__tooltip-data"></span>
                                                <!-- Data Will Come From Js -->
                                            </strong>
                  </p>
                </div>
                <!-- End Header -->

                <!-- Drop Zoon -->
                <div id="dropZoon" class="upload-area__drop-zoon drop-zoon">
                  <span class="drop-zoon__icon">
                                            <i class='bx bxs-file-image'></i>
                                        </span>
                  <p class="drop-zoon__paragraph">Drop your file here or Click to browse</p>
                  <span id="loadingText" class="drop-zoon__loading-text">Please Wait</span>
                  <img src="" alt="Preview Image" id="previewImage" class="drop-zoon__preview-image" draggable="false">
                  <input type="file" id="fileInput" class="drop-zoon__file-input" accept="image/*">
                </div>
                <!-- End Drop Zoon -->

                <!-- File Details -->
                <div id="fileDetails" class="upload-area__file-details file-details">
                  <div id="uploadedFile" class="uploaded-file">
                    <div class="uploaded-file__icon-container">
                      <i class='bx bxs-file-blank uploaded-file__icon'></i>
                      <span class="uploaded-file__icon-text"></span>
                      <!-- Data Will be Comes From Js -->
                    </div>
                    <div id="uploadedFileInfo" class="uploaded-file__info">
                      <span class="uploaded-file__name">Project 1</span>
                      <span class="uploaded-file__counter">0%</span>
                    </div>
                  </div>
                </div>
                <!-- End File Details -->
              </div>
            </div>
            <!-- End Upload Area -->

          </div>
        </div>
        <div class="modal-ftr">
          <button type="submit" class="add-prop" id="footer-btn" data-bs-dismiss="modal">Add</button>
        </div>
      </div>
    </div>
  </div>
</form>

The modal looks like this:

When I click on the Property Info, all the child elements in the a column: #toggle-content-add-modal related to Upload Image is deleted with the help of $("#toggle-content-add-modal").empty() and replaced by the elements related to Property Info.

This .empty() and and .html() is, in a way toggled when clicking respective nav-links (Upload Image and Property Info). But the data I entered like uploading the image or any information in the Property Info gets deleted also. I know .empty() specifically does that. But I cant find any other option in which the data is stored when toggling between nav-links.

Answer 1

You can keep the child elements you're removing by using children and detach:

const children = $("#toggle-content-add-modal").children().detach();

That removes them from the document but returns a jQuery object containing them, so you can put them back later with append.

Here's a simplified example:

$("input[type=text]").on("change input", (e) => {
    $("#echo").text(e.currentTarget.value);
});

let children = null;
$("input[type=button]").on("click", () => {
    if (children) {
        $("#container").append(children);
        children = null;
    } else {
        children = $("#container").children().detach();
    }
});

.echo {
    border: 1px solid black;
    padding: 4px;
    min-height: 1em;
}

<input type="button" value="Toggle">
<div>
Type something in the input box below, which will be echoed to a div under it, and then use the toggle button above to show removing and restoring the content (including the input's value and the "echo" div's text):
</div>
<hr>
<div id="container">
    <div>
        <label>
            Type something here:
            <input type="text" value="">
        </label>
    </div>
    <div>
        You've typed:
        <div id="echo"></div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>