JSFiddle - React, Tailwind, and code Playground

HTML

<div class="check_wrap">
  <ul id="fluits_list">
    <li><input id="fluits_apple" class="check_fluits" name="check_fluits" value="apple" type="checkbox">
      <label for="fluits_apple" class="check_label">
        <span class="i apple damekamo"></span>
      </label>
    </li>
    <li><input id="fluits_grape" class="check_fluits" name="check_fluits" value="grape" type="checkbox">
      <label for="fluits_grape" class="check_label">
        <span class="i grape damekamo"></span>
      </label>
    </li>
    <li><input id="fluits_banana" class="check_fluits" name="check_fluits" value="banana" type="checkbox">
      <label for="fluits_banana" class="check_label">
        <span class="i banana daijobu"></span>
      </label>
    </li>
    <li><input id="fluits_kiwi" class="check_fluits" name="check_fluits" value="kiwi" type="checkbox">
      <label for="fluits_kiwi" class="check_label">
        <span class="i kiwi daijobu"></span>
      </label>
    </li>
  </ul>
</div>

<div class="output pink">
  <p><span id="output1"></span></p>
  <p><span id="output2"></span></p>
</div>

<div class="output aqua">
  <p><span id="outputA"></span></p>
  <p><span id="outputB"></span></p>
</div>

<div class="none" style="display:none;">
  <p id="now_apple">appleを最初にチェックしたらダメです</p>
  <p id="now_grape">grapeを最初にチェックしたらダメです</p>
  <p id="now_banana">だいじょうぶです</p>
  <p id="now_kiwi">だいじょうぶです</p>
</div>

CSS

.list {
    list-style: none;
}
.i::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background-size: contain;
  vertical-align: middle;
  z-index: 1;
  right: 0;
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
  margin: 0 auto !important;
}
.apple:before {
  background-image: url(https://cdn.amanaimages.com/cen3tzG4fTr7Gtw1PoeRer/02343000826.jpg);
}
.grape:before {
  background-image: url(http://stat.profile.ameba.jp/profile_images/20150329/22/ae/2E/j/o064006401427634068143.jpg);
}
.banana:before {
  background-image: url(https://cdn.amanaimages.com/preview640/10214001337.jpg);
}
.kiwi:before {
  background-image: url(https://shop.yamatonoen.co.jp/upload/save_image/18H-078-11_01.png);
}

.pink {
    background: pink;
    padding: 20px;
}
.aqua {
    background: aqua;
    padding: 20px;
}

JavaScript

$(function(){

	////チェックしたらピンクに画像をコピー
  $('input[name=check_fluits]').change(function(){
    var clone=$(this).siblings().find('.i').clone();
    if($('input[name=check_fluits]:checked').length>2) {
      $(this).prop("checked",false);
      alert('チェックは２個までです');
      return false;
    }
    if($(this).prop('checked')){
      $('#output1,#output2').filter(function(){
        return $(this).html()=="";
      }).eq(0).html(clone);
    }else{
      console.log($.map(clone.prop('classList'),function(x){return "."+x;}).join(""));
      $('#output1,#output2').has($.map(clone.prop('classList'),function(x){return "."+x;}).join("")).html("");
    }
  });
  $('input[name=check_fluits]').prop('checked',false).filter('[value=apple],[value=banana]').prop('checked',true).trigger("change");
  
  	////チェックしたらアラート
	$('input[name=check_fluits]').change(function(){

		//ピンクの画像を水色にコピー	
		var cmc_unit1 = $('#output1').html();
			$('#outputA').html(cmc_unit1);
		var cmc_unit2 = $('#output2').html();
			$('#outputB').html(cmc_unit2);
	
		//「.i」の次のクラス（.appleとか）を取り出して代入（アラートで使うため） 
		var pair1 = $('#output1 .i').get(0).className.split(" ")[1];
		var pair2 = $('#output2 .i').get(0).className.split(" ")[1];
 
 			//チェックが２個のときのアラート
			if($('#fluits_list :checked').length == 2){
					var result = $('#now_' + pair1).text();
          
            //１個目にチェックしたやつが「.damekamo」を持ってたら、HTMLにある「それを最初にチェックしたらダメです」をアラート
						if (($('#output1').find('.i').hasClass('damekamo'))){					
							alert(result);
						} else
            //２個目にチェックしたやつが「.daijobu」を持ってたら、HTMLにある「それを最初にチェックしたらダメです」をアラート
            if (($('#output1').find('.i').hasClass('daijobu'))){
							alert(result);
            }
          
/********************
次のアラートがでない！
********************/

		//チェックが２個未満のときのアラート
			}else{
						alert('２個未満ですね');
			}
		
	}); 		
	
});