JSFiddle - React, Tailwind, and code Playground
HTML
<p>Pick materials</p>
<div class="color-params" id="col-params" style="display: block;">
<p> Choose a color </p>
<div class="image1">
<div id="image001">
<img src="\Users\cruel\Desktop\htmllll\color1.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="1" class="radio" id="radio-001" value="001" >
"color1"
</p>
</div>
<div class="image1">
<div id="image002">
<img src="\Users\cruel\Desktop\htmllll\color2.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="1" class="radio" id="radio-002" value="002" >
"color2"
</p>
</div>
<div class="image1">
<div id="image003">
<img src="\Users\cruel\Desktop\htmllll\color3.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="1" class="radio" id="radio-003" value="003" >
"color3"
</p>
</div>
</div>
<div class="elbow-params" id="el-params" >
<div class="image2">
<div id="image004">
<img src="\Users\cruel\Desktop\htmllll\elbow1.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="2" class="radio" id="radio-004" value="004" >
"elbow1"
</p>
</div>
<div class="image2">
<div id="image005">
<img src="\Users\cruel\Desktop\htmllll\elbow2.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="2" class="radio" id="radio-005" value="005" >
"elbow2"
</p>
</div>
<div class="image2">
<div id="image006">
<img src="\Users\cruel\Desktop\htmllll\elbow3.jpg" width="80">
<div class="select-image"></div>
</div>
<p>
<input type="radio" name="2" class="radio" id="radio-006" value="006" >
"elbow3"
</p>
</div>
<div...
CSS
div.image1 {float:left; margin-left: 5px;}
div.image2 {float:left; margin-left: 5px;}
div.image3 {float:left; margin-left: 5px;}
.image1:first-child, .image2:first-child, .image3:first-child {
clear: both;}
JavaScript
var images = {
"001004007" : "http://ih1.redbubble.net/image.90655513.4452/flat,1000x1000,075,f.u4.jpg",
"002005008" : "http://hdpics.co/wp-content/uploads/2016/09/Pepe-the-frog.png",
"003006009" : "http://1.bp.blogspot.com/-59lK9EruqLM/VT2FD_DkOcI/AAAAAAAALtw/rCDhysHUpw8/s1600/pepe-the-frog-meme-15.jpg",
"001005009" : "http://i2.kym-cdn.com/photos/images/facebook/000/134/427/1308079089001.png",
"003005007" : "http://i3.kym-cdn.com/photos/images/facebook/000/222/274/1324690418001.jpg",
"001004009" : "http://i2.kym-cdn.com/photos/images/facebook/000/210/888/1322794088001.jpg",
"001004008" : "https://yt3.ggpht.com/-E6-bX9llkZM/AAAAAAAAAAI/AAAAAAAAAAA/n4dv8YizWsU/s900-c-k-no-rj-c0xffffff/photo.jpg",
"002005009" : "http://i.ytimg.com/vi/1OQsIwn4_gc/maxresdefault.jpg",
"003005008" : "http://cdn.ipetitions.com/user-images/petitions/pepe-the-frog-the-movie/DnlxIAZwSAma2WV2p71p_VBEycfmb.jpg"
};
var inp = document.querySelectorAll('input[id^="radio-"]');
for (var i = 0; i < inp.length; i++) {
inp[i].onchange = onChange;
}
function setDefaultImage() {
document.getElementById('image').src = "http://coe.almau.edu.kz/img/no_image.png";
}
function onChange() {
var inputs = document.querySelectorAll('input[id^="radio-"]:checked');
if (inputs.length == 3) {
var str = "";
for (var i = 0; i < inputs.length; i++) {
str += inputs[i].value;
}
if (images[str] != undefined) {
document.getElementById('image').src = images[str];
} else {
setDefaultImage();
}
} else {
setDefaultImage();
}
}
setDefaultImage();