Firebase/Firestore - How to display user's saved image to different HTML file?

I'm creating a mobile web application with HTML/CSS/JS. Basically, I want the user to select one of the characters shown in HTML file and display the saved image from other HTML file (settings profile page).

This is where the user can select the image:

And I want the saved image (character) to be shown here:

I was only told to use Firebase/Firestore and place the images in my local folder, but I'm completely lost to how...

Here is the code for the first image:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title>Good Cop, Bad Cop</title>
    <link rel="stylesheet" href="./styles/Kurt/landing.css"/>
    <link rel="stylesheet" href="./styles/Jason/coach_selection.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-dark bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="">
          <img src="./images/Hamburger_icon.svg" alt="Hamburger Menu"/>
        </a>

        <a href = "styles/Jason/settings.html">
          <ul class="navbar-nav">
            <img src="./images/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile"
            height="50vh"/>
          </ul>
        </a>
      </div>
    </nav>
    <div class = "image">
        <img src="images/dog.png" id="dog" alt="dog">
        <img src="images/mother.png" id="mother" alt="mother">
        <img src="images/military.png" id="soldier" alt="soldier">
        <img src="images/teacher.png" id="teacher" alt="teacher">
    </div>
    <div class="button" id="button-confirm">
      <span>Confirm</span>
    </div>
    <div class="view-image" style="display:none;">
      <img src=""/>
      <div class="button" id="button-other"><span>Other</span></div>
    </div>

    <div class="fixed-bottom">
      <div class="navbar navbar-dark bg-primary">
        <div class="container-fluid">
          <div id="grid">
            <div class="bot-nav-img">
              <img src="./images/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal"
            height="50vh"/>
            </div>
            <div class="bot-nav-img">
              <img src="./images/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home"
            height="50vh"/>
            </div>
            <div class="bot-nav-img">
              <a href = "goals.html">
                <img src="./images/bootstrap-icons-1.3.0/table.svg" alt="Goals"
                height="50vh"/>
              </a>
            </div>
         </div>
        </div>
      </div>
    </div>



    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    <script src="./styles/Jason/coach_selection.js"></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    -->
  </body>
</html>

JS

var elementSelected = null;
var typeSelected = false;

$(document).on('click', '.image > img', function(){
  $('.image > img').each(function(){
    $(this).removeClass('active');
  })
  $(this).addClass('active');
  elementSelected = $(this);
  typeSelected = false;
});

$(document).on('input', '#text-src', function(){
  $('.image > img').each(function(){
    $(this).removeClass('active');
  })
  elementSelected = $(this);
  typeSelected = true;
})

$(document).on('click', '#button-confirm', function(){
  $('.image').hide();
  if(typeSelected == true){
    $('.view-image > img').attr('src', elementSelected.val());
  }
  else{
    $('.view-image > img').attr('src', elementSelected.attr('src'));
  }
  $('.view-image').fadeIn('high');
})

$(document).on('click', '#button-other', function(){
  $('.view-image').hide();
  $('.image').fadeIn('high');
})