How do I maintain paint color, while cycling through wheel style, and vice-versa?

I'm making a mock car selector page to help me learn JavaScript, and would like the user to be able to choose car color, then wheel style. The car color should be maintained while cycling through the wheel styles, and visa-versa. I'd like the user to be able to choose a wheel style, then cycle through the colors while maintaining the selected wheel style, or choose a paint color, then cycle through the wheels.

Currently, you can select between five different wheel types, or sixteen different colors, but independently of each other, and I'm failing to come up with the JavaScript logic to tie them together.

I have every unique pictures of all 16 paint colors with all 5 wheel styles, so a total of 80 pictures.

Things I've considered/tried...

• Creating an array with all 80 image paths, and calling the appropriate one
• Create 80 image tags in HTML to get them in the DOM, set image class to display: none; then set display: block; onClick

I'm failing to generate the logic with my newbieness, and I'm stuck. Below is some of the logic I'm currently using.

function color1() {
  document.getElementById("carerra").src = 'images/carerra-s/color1-option1.png';
  document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1-checked.png");';
  document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
  document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
  document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
  document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
  document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
  document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
  document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
  document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
  document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
  document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
  document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
  document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
  document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
  document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
  document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
  }
  
<!-- - - - - - - - - - - - - - - - - - CAR COLOR 2 - WHITE - - - - - - - - - - - - - - - - - -->
  function color2() {
  document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color2-option1.png';
  document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2-checked.png");';
  document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
  document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
  document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
  document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
  document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
  document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
  document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
  document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
  document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
  document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
  document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
  document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
  document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
  document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
  document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';  
  }
<!-- - - - - - - - - - - - - - - - - - CAR COLOR 3 - YELLOW - - - - - - - - - - - - - - - - - -->
  function color3() {
  document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color3-option1.png';
  document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3-checked.png");';
  document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
  document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
  document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
  document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
  document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
  document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
  document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
  document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
  document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
  document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
  document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
  document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
  document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
  document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
  document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
  }
<!-- - - - - - - - - - - - - - - - - - CAR COLOR 4 - RED - - - - - - - - - - - - - - - - - -->
  function color4() {
  document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color4-option1.png';
  document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4-checked.png");';
  document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
  document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
  document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
  document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
  document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
  document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
  document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
  document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
  document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
  document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
  document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
  document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
  document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
  document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
  document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
  }
  
  function color5() {
  document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color5-option1.png';
  document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5-checked.png");';
  document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
  document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
  document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
  document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
  document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
  document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
  document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
  document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
  document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
  document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
  document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
  document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
  document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
  document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
  document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
  }

  function color6() {
  document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color6-option1.png';
  document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6-checked.png");';
  document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
  document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
  document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
  document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
  document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
  document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
  document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
  document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
  document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
  document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
  document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
  document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
  document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
  document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
  document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
  }
  
  function color7() {
  document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color7-option1.png';
  document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7-checked.png");';
  document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
  document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
  document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
  document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
  document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
  document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
  document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
  document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
  document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
  document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
  document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
  document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
  document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
  document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
  document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
  }
  
  function color8() {
  document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color8-option1.png';
  document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8-checked.png");';
  document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
  document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
  document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
  document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
  document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
  document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
  document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
  document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
  document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
  document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
  document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
  document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
  document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
  document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
  document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
  }

You can significantly reduce the amount of code using iteration over your select-able DOM elements...

So here is your call to the site to display the car and wheels...

<img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/color15-option3.png" alt="911 Carerra S" id="carerra" />

You have a color and an option for the wheels. => color15-option3

All you need to do is plug in the proper index of the color and wheel here and then re-construct your SRC link to display the proper image showing your options.

We can determine the color index using dataset attribute in your HTML for the input and wheel elements.

For example, the following HTML line is the fifth line of colors avaibale so we'll give it a data-id of 5:

<input id="exterior-swatch5" data-id="5" type="button" value=" " class="swatch" /> 

Add a dataset attribute for each select-able element that corresponds with the correct string needed to plug into your SRC attribute to get a proper image called back from your site.

All you have to do is create one function to handle two event listeners, one event for the color and another for the wheels, each call back runs the the same function to check the class of the event target.

Then you reconstruct the src attribute to display the proper image you wish to display.

document.getElementById('carerra').src = "https://www.sanjosecoder.com/porsche-working/images/carerra-s/color" + selectedColor + "-option" + wheelOption + ".png";

Note: You will need to retrieve the default setting for color and wheel in your HTML, this can be done using a couple of .split functions on the default src string. We define each default wheel and color using this method, then we plug them in each time the click event is triggered using a conditional.

const swatch = document.querySelectorAll('.swatch')
const wheels = document.querySelectorAll('.wheels')
const car = document.getElementById('carerra')

function getOptions(e) {
  const selected = e.target;
  let defaultColor = car.src.split('color')
  let defColor = defaultColor[1].split('-')[0]

  let defaultWheel = car.src.split('option')
  let defWheel = defaultWheel[1].split('.')[0]
   
   // conditional to check color
   e.target.classList.contains('swatch') ?
    //this is the color event
    defColor = e.target.dataset.id : null

   // conditional to check wheel
   e.target.classList.contains('wheels') ?
    //this is the wheel event
    defWheel = e.target.dataset.id : null
    
  document.getElementById('carerra').src = `https://www.sanjosecoder.com/porsche-working/images/carerra-s/color${defColor}-option${defWheel}.png`;
}

swatch.forEach(input => {
  input.addEventListener('click', getOptions)
})

wheels.forEach(wheel => {
  wheel.addEventListener('click', getOptions)
})

// this could be reduced down to => window.addEventListener('click', getOptions) 
// as there is a conditional to check the evnet classList and will only fire in 
// the conditional there is the proper class contained within the element

.swatch {
  width: 35px;
  height: 35px;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  display: inline-block;
  margin: 5px;
  padding: 0;
  overflow: hidden;
  /* background-image: url(images/checkmark.png);
 background-repeat: no-repeat;
 background-position: 100% 100%;*/
}

.swatch:hover {
  box-shadow: 0 0 3px #d7d4d4;
}

.swatch:active,
.swatch:focus {
  border: 1px solid #ff0000;
  box-shadow: 0 0 3px #ff0000;
}

#exterior-swatch1 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch2 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch3 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch4 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch5 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch6 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch7 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch8 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch9 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch10 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch11 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch12 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch13 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch14 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch15 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#exterior-swatch16 {
  background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.wheels {
  width: 45px;
  height: 45px;
  display: inline-block;
  float: none;
  margin: 0 auto;
  padding: 0;
}

#carerra {
  width: 500px;
  height: auto;
  margin: 0 auto;
  padding: 0;
  float: none;
  display: inline-block;
}

<ul id="example4">
  <li class="active">
    <h3 class="accord">Exterior Colors</h3>
    <div class="panel loading">
      <h5 class="option-subhead">Standard Colors</h5>
      <input id="exterior-swatch1" data-id="1" type="button" value=" " class="swatch" />
      <input id="exterior-swatch2" data-id="2" type="button" value=" " class="swatch" />
      <input id="exterior-swatch3" data-id="3" type="button" value=" " class="swatch" />
      <input id="exterior-swatch4" data-id="4" type="button" value=" " class="swatch" />
      <h5 class="option-subhead">Metallic Colors</h5>
      <input id="exterior-swatch5" data-id="5" type="button" value=" " class="swatch" />
      <input id="exterior-swatch6" data-id="6" type="button" value=" " class="swatch" />
      <input id="exterior-swatch7" data-id="7" type="button" value=" " class="swatch" />
      <input id="exterior-swatch8" data-id="8" type="button" value=" " class="swatch" /><br>
      <input id="exterior-swatch9" data-id="9" type="button" value=" " class="swatch" />
      <input id="exterior-swatch10" data-id="10" type="button" value=" " class="swatch" />
      <input id="exterior-swatch11" data-id="11" type="button" value=" " class="swatch" />
      <input id="exterior-swatch12" data-id="12" type="button" value=" " class="swatch" />
      <h5 class="option-subhead">Special Colors</h5>
      <input id="exterior-swatch13" data-id="13" type="button" value=" " class="swatch" />
      <input id="exterior-swatch14" data-id="14" type="button" value=" " class="swatch" />
      <input id="exterior-swatch15" data-id="15" type="button" value=" " class="swatch" />
      <input id="exterior-swatch16" data-id="16" type="button" value=" " class="swatch" />
    </div>
  </li>

  <li>
    <h3 class="accord">Wheel Options</h3>
    <div class="panel loading">
      <img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/wheels/wheel1.png" alt="Wheel Option 1" id="wheel1" data-id="1" class="wheels" />
      <img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/wheels/wheel2.png" alt="Wheel Option 2" id="wheel2" data-id="2" class="wheels" />
      <img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/wheels/wheel3.png" alt="Wheel Option 3" id="wheel3" data-id="3" class="wheels" />
      <img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/wheels/wheel4.png" alt="Wheel Option 4" id="wheel4" data-id="4" class="wheels" />
      <img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/wheels/wheel5.png" alt="Wheel Option 5" id="wheel5" data-id="5" class="wheels" />
    </div>
  </li>

  <div id="car">
    <img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/color1-option1.png" alt="911 Carerra S" id="carerra" />
  </div>

Here is your fiddle with the code listed above... JSFiddle