Trouble having a dropdown change an image being displayed

Question

My goal is to have a series of 4 images that you can click, a drop-down menu appears, and a new selection can be made. The new selection should change the image to one that corresponds with the selection. Here is what I have so far.

<div class="container">
  <div class="row">
    
    <h2>Test v0.1</h2>
    <p>Click to see the available options</p>

  <div class="col-md-3">
    <div class="dropdown">
      <a href="#" id="imageDropdown" data-toggle="dropdown">
        <img id="Cube1" src="img/Configs/Cube01Config01.png">
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
      </ul>
    </div>
  </div>
  
  <div class="col-md-3">
  <div class="dropdown">
      <a href="#" id="imageDropdown" data-toggle="dropdown">
        <img id="Cube2" src="img/Configs/Cube01Config01.png">
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
      </ul>
    </div>
  </div>

  <div class="col-md-3">
    <div class="dropdown">
        <a href="#" id="imageDropdown" data-toggle="dropdown">
          <img id="Cube3" src="img/Configs/Cube01Config01.png">
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
        </ul>
      </div>
    </div>

    <div class="col-md-3">
      <div class="dropdown">
          <a href="#" id="imageDropdown" data-toggle="dropdown">
            <img id="Cube4" src="img/Configs/Cube01Config01.png">
          </a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
          </ul>
        </div>
      </div>
</div>

And here is what I am using to listen to and switch between the images, and after tinkering too much it's not working anymore in it's current state.

$(document).ready(function() {
  // Listen for changes in the dropdown menus
  $('.dropdown-menu a').click(function() {
    // Get the text of the selected dropdown menu item
    var cubeName = $(this).text();

    // Update the image based on the selected dropdown menu item
    if (cubeName == 'Cube 1') {
      $('#cube1').attr('src', 'img/Configs/Cube01Config01.png');
    } else if (cubeName == 'Cube 2') {
      $('#cube1').attr('src', 'img/Configs/Cube02Config01.png');
    } else if (cubeName == 'Cube 3') {
      $('#cube1').attr('src', 'img/Configs/Cube03Config01.png');
    } else if (cubeName == 'Default Cube') {
      $('#cube1').attr('src', 'img/Configs/Cube01Config01.png');
    }
  });
});

Any help, alternative methods, or pointing in the right direction would be extremely helpful!