JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="two-stars" id="two-stars">
		<label for="two-stars">2*</label>
		<br>
		
		<input type="checkbox" name="three-stars" id="three-stars">
		<label for="three-stars">3*</label>
		<br>
		
		<input type="checkbox" name="four-stars" id="four-stars">
		<label for="four-stars">4*</label>	
		<br>
		
		<input type="checkbox" name="five-stars" id="five-stars">
		<label for="five-stars">5*</label>
    
    <div id='test'>
    
    </div>

JavaScript

$('input:checkbox').change(function(){
		
			starsQueries = '';
			if( $('#two-stars').is(':checked') ){
				starsQueries += '&stars=401';
				console.log('checked!');
        $('#test').append('2* checked<br>');
			}
			if( $('#three-stars').is(':checked') ){
				if( ('#two-stars').is(':checked') ){
					starsQueries += ',402';
				} else {
					starsQueries += '&stars=402';
				}
        $('#test').append('3* checked<br>');
			}
			if( $('#four-stars').is(':checked') ){
				if( ('#three-stars').is(':checked') || ('#two-stars').is(':checked') ){
					starsQueries += ',403';
				} else {
					starsQueries += '&stars=403';
				}
        $('#test').append('4* checked<br>');
			}
			if( $('#five-stars').is(':checked') ){
				if( ('#four-stars').is(':checked') || ('#three-stars').is(':checked') || ('#two-stars').is(':checked') ){
					starsQueries += ',404';
				} else {
					starsQueries += '&stars=404';
				}
        $('#test').append('5* checked<br>');
			}
	});