JSFiddle - React, Tailwind, and code Playground

by oszis113

HTML

<div class="input-container">
  <input type="checkbox" id="1" class="sample-checkbox"><label for="1">label</label>
  <input type="checkbox" id="2" class="sample-checkbox"><label for="2">label2</label>
</div>
<div class="show-value"></div> <!-- сюда выводится значение инпута. -->

CSS

.input-container {
  margin-bottom: 20px;
}
.input-value {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  background-color: #ddd;
  border-radius: 10px;
  cursor: pointer;
}

JavaScript

(function($){
	$('input.sample-checkbox').on('click', function(){
  	var $self = $(this),
    		$value = $self.attr('id'),
    		$label = $self.parent().find('label[for=' + $value + ']').text();
  	if ($self.is(':checked')) {
    	$('.show-value').append('<div class="input-value" data-input-id="' + $value + '">' + $label + '</div>');
    }else {
    	$('.input-value[data-input-id=' + $value + ']').remove();
		}
    
    $('.input-value').on('click', function(){
    var $self = $(this),
  			$value = $self.attr('data-input-id');
    $('input[id=' + $value + ']').prop('checked', false);
    $self.remove();
  });
  })
})(jQuery)