JSFiddle - React, Tailwind, and code Playground

HTML

<div class="porção" id="1">
					<div class="quantidade" id="1">
<input type="checkbox" class="ckdas" id="1" name="cores[]"  value="1" />1x
<input type="checkbox" class="ckdas" id="1" name="cores[]"  value="2" />2x
<input type="checkbox" class="ckdas" id="1" name="cores[]"  value="3" checked/>3x
					</div>

<input type="checkbox" class="bube" id="1" name="forma[]" value="1" checked/> bacon<br/>
</div>
    
				<div class="porção" id="2">
					<div class="quantidade" id="2">
<input type="checkbox" class="ckdas" id="2" name="cores[]"  value="1" />1x
<input type="checkbox" class="ckdas" id="2" name="cores[]"  value="2" />2x
<input type="checkbox" class="ckdas" id="2" name="cores[]"  value="3" />3x
					</div>

<input type="checkbox" class="bube" id="2" name="forma[]" value="2" /> bacon<br/>
</div>
    
    
				<div class="porção" id="3">
					<div class="quantidade" id="3">
<input type="checkbox" class="ckdas" id="3" name="cores[]"  value="1" />1x
<input type="checkbox" class="ckdas" id="3" name="cores[]"  value="2" />2x
<input type="checkbox" class="ckdas" id="3" name="cores[]"  value="3" />3x
					</div>

<input type="checkbox" class="bube" id="3" name="forma[]" value="1" /> bacon<br/>
</div>
    
    
				<div class="porção" id="4">
					<div class="quantidade" id="4">
<input type="checkbox" class="ckdas" id="4" name="cores[]"  value="1" checked/>1x
<input type="checkbox" class="ckdas" id="4" name="cores[]"  value="2" />2x
<input type="checkbox" class="ckdas" id="4" name="cores[]"  value="3" />3x
					</div>

<input type="checkbox" class="bube" id="4" name="forma[]" value="1" checked/> bacon<br/>
</div>

CSS

.porção {position: relative; z-index:9; }
.quantidade { display:none; position: absolute; margin-left:24px; width: 90%; background-color: #f9f9f9;}

JavaScript

$(document).ready(function() {

$('input:checkbox[class=ckdas]').on('click',function(e){
	  var fdgerte = $(this).attr('id');
      $('.ckdas[id="'+fdgerte+'"]').prop('checked','');
	  $(this).prop('checked','checked');    
});

$('input:checkbox[class=bube]').on('mouseenter',function(e){
	  var idex = $(this).attr('id');
		if( $('.bube[id="'+idex+'"]').is(':checked') ){
			$('.quantidade[id="'+idex+'"]').show();
		} else {
			$('.quantidade[id="'+idex+'"]').hide();
		} 
$('.porção[id="'+idex+'"]').hover(function () {
	if( $('.bube[id="'+idex+'"]').is(':checked') ){
		$('.quantidade[id="'+idex+'"]').show();
    } else {
		$('.quantidade[id="'+idex+'"]').hide();
    }
}, 
	function () {
		$('.quantidade[id="'+idex+'"]').hide();
	});
});

$('input:checkbox').click(function () {

	var oioi = $(this).attr('id');

		if( $('.bube[id="'+oioi+'"]').is(':checked') ){	
		}else {
		$('.ckdas[id="'+oioi+'"]').attr("checked",false);
		}
	
		if( $('.bube[id="'+oioi+'"]').is(':checked') ){

			$('.quantidade[id="'+oioi+'"]').show();
		} else {
			$('.quantidade[id="'+oioi+'"]').hide();
		}
	
$('.porção[id="'+oioi+'"]').hover(function () {
	if( $('.bube[id="'+oioi+'"]').is(':checked') ){
		$('.quantidade[id="'+oioi+'"]').show();
    } else {
		$('.quantidade[id="'+oioi+'"]').hide();
    }
}, 
	function () {
		$('.quantidade[id="'+oioi+'"]').hide();
	});
});




});