JSFiddle - React, Tailwind, and code Playground

by Reddy Prasad Andhe

HTML

<div class="checkboxes">
	<h2>Heading</h2>
	<ul>
		<li>
			<label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 1</span></label>
		</li>
		<li>
			<label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 2</span></label>
		</li>
		<li>
			<label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 3</span></label>
		</li>
	</ul>
</div>
<a href="javascript:;" id="getCheckboxesContent">Get content</a>

<div class="checkboxes-content">
	
</div>

CSS

body{font-family:verdana;font-size:14px;}
.checkboxes{padding:20px;}
ul{margin:0;padding:0;list-style:none;}
li{margin-top:5px;}
label .lbl{margin-left:5px;}
.item{margin-top:10px;background:#efefef;padding:10px;}
h2{font-weight:bold;margin:0;padding:0;font-size:16px;}
.checkboxes-content{margin:15px;}
#getCheckboxesContent{margin-left:15px;}

JavaScript

$(document).on('click', '#getCheckboxesContent', function(){
	var count = $('.checkboxes ul li').length;
	var value1 = $('.checkboxes ul li:nth-child(1) label .lbl').text();
	var value2 = $('.checkboxes ul li:nth-child(2) label .lbl').text();
	var value3 = $('.checkboxes ul li:nth-child(3) label .lbl').text();
	$('.checkboxes-content').html('');
	$('.checkboxes-content').append('Total checkboxes : ' + count);
		$('.checkboxes-content').append('<div class="item">Item 1 : <input type="text" value="'+value1+'" /></div>');
	$('.checkboxes-content').append('<div class="item">Item 2 : <input type="text" value="'+value2+'" /></div>');
	$('.checkboxes-content').append('<div class="item">Item 3 : <input type="text" value="'+value3+'" /></div>');
})