show an image based on condition set

functionality:

creating a web app that will show an image depending on the option choice that user has selected in the previous page.

Therefore, the functional flow is as follows:

1. User chooses a "YES" or "NO" question: the choice chosen will affect the final image shown

2. After user has chooses either a "YES" or "NO" answer, it will bring them to a common page 2nd choice page of "0","1","2","3","4","5"

3. Hence depending on the choice user has made based on the 2 questions, the different affiliate image will be shown. Hence, the end image will be as displayed:

Image A -> if user has chosen "NO" and "0"

Image B -> if user has chosen "YES" and "1" to "5"

Image C -> if user has chosen "YES" and "0"

Issue:

I am currently at a lost on how to proceed or rather on how to even start. Hence, I would humbly request some assistance. Thank you.

Code:

function loadQns2() {

  $('#H_FirstQ').fadeOut();

  $('#H_SecondQ').fadeIn();
}

//Green-Screen
function loadPhotobooth(flag) {
  $('#H_SecondQ').fadeOut();


  //method where the final image will be displayed
  if ($('#H_FirstQ') = YES && $('#H_SecondQ') = 0) {
    ....(show image)
  } else if ($('#H_FirstQ') = YES && $('#H_SecondQ') = 1 - 5) {..(show image)..
  } else if ($('#H_FirstQ') = NO && $('#H_SecondQ') = 0) {..(show image)..
  }
}

<div id="H_FirstQ" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=2; top:0px; left:0px; display: none;">

  <!--Video Div-->
  <div id="First_Question_Video" style="position:absolute;"></div>

  <img src="lib/img/yes.png" class="Answer_button_animate" style="width:650px; height:200px; top:600px; left:290px; position: absolute; z-index: 0; " onclick="loadQns2()" />

  <img src="lib/img/no.png" class="Answer_button_animate" style="width:650px; height:180px; top:615px; left:970px; position: absolute; z-index: 0; " onclick="loadQns2()" />
</div>

<div id="H_SecondQ" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=3; top:0px; left:0px; display: none;">

  <!--Video Div-->
  <div id="Second_Question_Video" style="position:absolute;"></div>

  <img src="lib/img/qns2_1.png" class="Answer_button_animate" style="width:200px; height:350px; top:500px; left:274px; position: absolute; z-index: 0; " onclick="loadPhotobooth('1')" />
  <img src="lib/img/qns2_2.png" class="Answer_button_animate" style="width:200px; height:350px;  top:500px; left:474px; position: absolute; z-index: 0; " onclick="loadPhotobooth('2')" />
  <img src="lib/img/qns2_3.png" class="Answer_button_animate" style="width:200px; height:350px;  top:500px; left:674px; position: absolute; z-index: 0; " onclick="loadPhotobooth('3')" />
  <img src="lib/img/qns2_4.png" class="Answer_button_animate" style="width:200px; height:350px;  top:500px; left:874px; position: absolute; z-index: 0; " onclick="loadPhotobooth('4')" />
  <img src="lib/img/qns2_5.png" class="Answer_button_animate" style="width:200px; height:350px; top:500px; left:1074px; position: absolute; z-index: 0; " onclick="loadPhotobooth('5')" />
  <img src="lib/img/qns2_0.png" class="Answer_button_animate" style="width:400px; height:350px;  top:500px;left:1274px; position: absolute; z-index: 0; " onclick="loadPhotobooth('0')" />
</div>


<!--FINAL 3 IMAGES THAT WILL BE SHOWN BASE ON CHOICE MADE BY USER -->
<div id="NonDriverMsg" class="menu" style="display:none; position:absolute; z-index:7; top:0px; height: 1080px; width:1920px; left:0px;">
  <img id="ans1_non-driver" src="img/ans1_non-driver.png" style="width:1920; height:1080; top:0; left:0; position: absolute; z-index: 0; visibility:hidden;" />
</div>

<div id="NonDrinkDriverMsg" class="menu" style="display:none; position:absolute; z-index:7; top:0px; height: 1080px; width:1920px; left:0px;">
  <img id="ans1_driver" src="img/ans1_driver.png" style="width:1920; height:1080; top:0; left:0; position: absolute; z-index: 0; visibility:hidden;" />
</div>

<div id="DrinkDriverMsg" class="menu" style="display:none; position:absolute; z-index:7; top:0px; height: 1080px; width:1920px; left:0px;">
  <img id="ans2" src="img/ans2.png" style="width:1920; height:1080; top:0; left:0; position: absolute; z-index: 0; visibility:hidden;" />
</div>