Q:

Create a dropdown, with a dependent dropdown, which generates images

I am so very sorry if this turns out to be a stupid or easy question. I'm self-taught so my knowledge is limited, and javascript is not something I am very familiar with, unfortunately this needs a rather speedy fix.
I'm trying to create a dropdown menu, linked to a database. Dropdown 1 displays 3 options (the pre-selected one depends on the database query). If option 2 or 3 are selected, a further dropdown menu should be present, which lists either a selection corresponding to Dropdown 1-option 2, or Dropdown 1-option 3.
Finally, selecting from Dropdown 2 should show an image that corresponds with the selection.
If the database-queried auto selected options correspond to both dropdowns and an image, this should automatically show up (without first being reselected).
I've attempted to piece this together out of various stackoverflow answers I've managed to find and so far I've got this JSFiddle working 90% (the only thing I can't figure out is how to show all options if the "selected" option says it should).
However on my website I can't get it to work. At the start of my code I call up the jQuery file like so:
<script type="text/javascript" src="/js/jquery-3.2.1.js"></script>

The code itself is here:

<?php

$USERINFO = $mysqli->query("SELECT * FROM members WHERE id = '$USERID'");         
$USERINFO = $USERINFO->fetch_object();

echo "<div style=\"width: 49%; display: inline-block;\">

<script language=\"JavaScript\" type=\"text/javascript\">

// linking values to dropdowns
var ranksLists = {
  'Rebel Alliance': '#rebel-ranks',
      'Empire': '#empire-ranks',
};

$('select[name=alliance]').change(function(){

  //hide all extra lists
  $('.hide').hide();

  //get current value
  var value = $(this).val();

  //if there is a list for this value, show it
  if (value in ranksLists){       
    $(ranksLists[value]).show();
  }

});   

var rebeldata = {
    'Recruit' : { img: '' },
    'Corporal' : { img: '/images/ranks/rebel/corporal.png' },
    'Sergeant' : { img: '/images/ranks/rebel/sergeant.png' },
    'Lieutenant' : { img: '/images/ranks/rebel/lieutenant.png' },
    'Captain' : { img: '/images/ranks/rebel/captain.png' },
    'Commander' : { img: '/images/ranks/rebel/commander.png' },
    'Wing Commander' : { img: '/images/ranks/rebel/wingcommander.png' },
    'Major' : { img: '/images/ranks/rebel/major.png' },
    'Commodore' : { img: '/images/ranks/rebel/commodore.png' },
    'Colonel' : { img: '/images/ranks/rebel/colonel.png' },
    'Admiral' : { img: '/images/ranks/rebel/admiral.png' },
    'Brigadier' : { img: '/images/ranks/rebel/brigadier.png' },
    'General' : { img: '/images/ranks/rebel/general.png' },
};

$('.rebel-rankbadge').change(function() {
    var value = $(this).val();
    if (rebeldata[value] != undefined)
    {
        $('#rank-image').attr('src', rebeldata[value].img);
    }
});
</script>

      <div>Alliance : </div>
      <div>
      <select name=\"alliance\" id=\"ranks\">";

      $alliance = array("Neutral" => "Neutral",
                      "Rebel Alliance" => "Rebel Alliance",
                      "Empire" => "Empire");

          foreach ($alliance as $a => $d) {

                  echo "<option value=\"$a\"";

              if ($a == $USERINFO->alliance) echo " selected";

              echo "> " . $d . "</option>";
      }

      echo "

      </select>

      <select name=\"rank\" id=\"rebel-ranks\" class=\"hide rebel-rankbadge\">";

      $rank = array("Civilian" => "Civilian",
                  "Recruit" => "Recruit",
                  "Corporal" => "Corporal",
                  "Sergeant" => "Sergeant",
                  "Lieutenant" => "Lieutenant",
                  "Captain" => "Captain",
                  "Commander" => "Commander",
                  "Wing Commander" => "Wing Commander (Navy)",
                  "Major" => "Major (Army)",
                  "Commodore" => "Commodore (Navy)",
                  "Colonel" => "Colonel (Army)",
                  "Admiral" => "Admiral (Navy)",
                  "Brigadier" => "Brigadier (Army)",
                  "General" => "General");

          foreach ($rank as $key => $value) {

                  echo "<option value=\"$key\"";

              if ($key == $USERINFO->rank) echo " selected";

              echo "> " . $value . "</option>";

      }

      echo "

      </select>

      <select name=\"rank\" id=\"empire-ranks\" class=\"hide empire-rankbadge\"> ";

      $rank = array("Evil Civilian" => "Evil Civilian",
                  "Evil Recruit" => "Evil Recruit",
                  "Evil Corporal" => "Evil Corporal",
                  "Evil Sergeant" => "Evil Sergeant",
                  "Evil Lieutenant" => "Evil Lieutenant",
                  "Evil Captain" => "Evil Captain",
                  "Evil Commander" => "Evil Commander",
                  "Evil Wing Commander" => "Evil Wing Commander (Navy)",
                  "Evil Major" => "Evil Major (Army)",
                  "Evil Commodore" => "Evil Commodore (Navy)",
                  "Evil Colonel" => "Evil Colonel (Army)",
                  "Evil Admiral" => "Evil Admiral (Navy)",
                  "Evil Brigadier" => "Evil Brigadier (Army)",
                  "Evil General" => "Evil General");

          foreach ($rank as $key => $value) {

                  echo "<option value=\"$key\"";

              if ($key == $USERINFO->rank) echo " selected";

              echo "> " . $value . "</option>";

      }

      echo "

      </select>

      </div>

      <div><img id=\"rank-image\" src=\" \" /></div>

      </div>"; ?>

A:

It turns out this really was just a dumb question. All I needed to do was wrap the Javascript/jQuery code inside

$(document).ready(function(){
code
});

Now I just need to figure out how to also make it load properly onload

