複数のselectから選択した順番通りにコンテンツを表示させたい。

前回の質問での続きです。
プルダウン項目のselectを3つ配置して、選択した項目のコンテンツを下に表示させたいです。

頂いた回答を基に作成しました。ご回答いただいた皆様ありがとうございます。

ただ、selectで選択した3点の順番通りに下記に書いてあるカラーや素材の情報が並ぶといいなと思っております。
例えば左から製品1・製品5・製品3と選択した場合、
左から製品1の情報・製品3の情報・製品5の情報と並ぶのではなく、
製品1・製品5・製品3の情報の順番で並んでほしいのです。

checkboxに変更してみようとしたのですが、上手くできませんでした。
selectでやってみたい気がしますが、divの並び順を見ても素人の私では難しいと感じました。

ご教授のほどお願い申し上げます。

<style type="text/css">
		.compare{
			width:600px;
		}
		form,
		#color,
		#materials{
			display: flex;
			justify-content: space-around;
		}
		</style>

<div class="compare">
 <form>
　<select>
　　<option value="item1" selected>製品1</option>
　　<option value="item2">製品2</option>
　　<option value="item3">製品3</option>
　　<option value="item4">製品4</option>
　　<option value="item5">製品5</option>
　</select>

　<select>
　　<option value="item1">製品1</option>
　　<option value="item2" selected>製品2</option>
　　<option value="item3">製品3</option>
　　<option value="item4">製品4</option>
　　<option value="item5">製品5</option>
　</select>

　<select>
　　<option value="item1">製品1</option>
　　<option value="item2">製品2</option>
　　<option value="item3" selected>製品3</option>
　　<option value="item4">製品4</option>
　　<option value="item5">製品5</option>
　</select>

 </form>

<div>カラー</div>
<div id="color">
<div data-content="item1">赤</div>
<div data-content="item2">黄</div>
<div data-content="item3">青</div>
<div data-content="item4">緑</div>
<div data-content="item5">紫</div>
</div>

<div>素材</div>
<div id="materials">
<div data-content="item1">綿</div>
<div data-content="item2">麻</div>
<div data-content="item3">ポリ</div>
<div data-content="item4">レーヨン</div>
<div data-content="item5">ウール</div>
</div>
		
		
		<script type="text/javascript">
		//初期全非表示
$("#color").children("div").hide();
$("#materials").children("div").hide();
$(function(){
    //初期状態から実行
    selected();
    //選択時に実行
    $("select").on("change",function(){
        $("#color").children("div").hide();
        $("#materials").children("div").hide();
        selected();
    });
});

function selected(){
    $("select").each(function(){
        var item_selected = $(this).val();
        $("#color").children("div").each(function(){
            if($(this).data("content") == item_selected){
                $(this).show(); 
            }
        });
        $("#materials").children("div").each(function(){
            if($(this).data("content") == item_selected){
                $(this).show(); 
            }
        });
    });
}
			
			$(function(){
  $('.compare select').on('change',function(){
    $('.compare select option').prop("disabled",false);
    $('.compare div[data-content]').hide();
    $('.compare select').each(function(){
      $(this).siblings('select').find('option[value="'+$(this).val()+'"]').prop('disabled',true);
      $('.compare div[data-content="'+$(this).val()+'"]').show();
    });
  }).eq(0).trigger('change');
});
		</script>



</div>