JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="bt_checkbox" value="Check All" style="min-width:100px"/> 
	<input type="button" value="Ok" style="min-width:100px"/> 
	<input type="button" value="Cancel" style="min-width:100px"/> 
	<hr/>
	
	<div>
		<div  id="country" style="text-align:center;">
			<form action="">
		 
					<span class="sp_country" style="cursor:pointer;display:inline-block; min-width: 200px; max-width: 200px;margin:2px; font-weight:bold; text-align:left; border:1px solid #c9c9c9; padding:15px;">
						<input class="cp_country" style="cursor:pointer;" type="checkbox" name="vehicle" value="data1">data1
					</span>
			 
                        	<span class="sp_country" style="cursor:pointer;display:inline-block; min-width: 200px; max-width: 200px;margin:2px; font-weight:bold; text-align:left; border:1px solid #c9c9c9; padding:15px;">
						<input class="cp_country" style="cursor:pointer;" type="checkbox" name="vehicle" value="data2">data2
					</span>
                                
                                	<span class="sp_country" style="cursor:pointer;display:inline-block; min-width: 200px; max-width: 200px;margin:2px; font-weight:bold; text-align:left; border:1px solid #c9c9c9; padding:15px;">
						<input class="cp_country" style="cursor:pointer;" type="checkbox" name="vehicle" value="data3">data2
					</span>
			</form>
		</div> 
	</div>

JavaScript

jQuery('.sp_country').click(function() {
				var checkbox = $(this).find(":checkbox"),
				checked = checkbox.is(":checked"); 
				checkbox.prop("checked", !checked);

			});
			
			jQuery('.sp_country input:checkbox').on('click', function(e) { 
				e.stopImmediatePropagation(); 
				var checked = (e.currentTarget.checked) ? false : true;
				e.currentTarget.checked=(checked) ? false : checked.toString();
			});
			
			jQuery('#bt_checkbox').click(function(e){  
				e.stopImmediatePropagation();
				if(jQuery(this).val() === 'Uncheck All'){
					jQuery('#country input:checkbox').removeAttr('checked');
					jQuery(this).val('Check All');  
				}else{
					jQuery('#country input:checkbox').attr('checked','checked');
					jQuery(this).val('Uncheck All');
				} 
			});