IF this === this AND this === this show/hide div Javascript

I'm attempting to create an HTML/CSS/JS form to be used offline.

So far, I've created the show() and hide() for div functionality based on a selection.

If Cloth & White are selected show one div but I can't get it to work.

Here is my attempt below:

if ($("#StartSelector").val() == "Cloth") &&
  if ($("#ColourField").val() == "White") {
    $('#Program').show();
    else {
      $('#Program').hide();
    }
  };

form {
  max-width: 900px;
  display: block;
  margin: 0 auto;
}

<form>
  <div class="form-group">
    <label for="StartSelector">What are you washing?</label>
    <select class="form-control" id="StartSelector">
      <option value="no">Select wash option</option>
      <option value="Cloth">Table Cloth & Napkins</option>
      <option value="HeavyDuty">Heavy Duty Work Wear</option>
      <option value="Kitchen">Kitchen Work Wear</option>
      <option value="Bed">Bed Linen</option>
      <option value="Curtains">Curtains</option>
      <option value="Bath">Bath Towels & Robes</option>
      <option value="Uniforms">Uniforms</option>
      <option value="Personal">Personal Clothing</option>
      <option value="Mops">Mops & Cleaning Textiles</option>
      <option value="Low">Filter for low temperatures</option>
    </select>
  </div>
  <div class="form-group" id="Colours">
    <label for="ColourDiv">Types of wash.</label>
    <select class="form-control" id="ColourField">
      <option value="no">Select wash option</option>
      <option value="White">White</option>
      <option value="Colours">Colours</option>
      <option value="Delicate">Delicate</option>
    </select>
  </div>
  <div class="form-group" id="Program" style="display: none;">
    <img src="Program1.png" alt="Program 1" width="auto" height="400">
  </div>
</form>