JSFiddle - React, Tailwind, and code Playground

by Reddy Prasad Andhe

HTML

<div class="checkboxes">
	<h2>Heading</h2>
	<ul>
		<li>
			<h3 class="text">Hello World</h3>
			<label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 1</span></label>
			<img src="https://via.placeholder.com/100x20.png" alt="">
		</li>
		<li>
			<h3 class="text">Lorem ipsum</h3>
			<label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 2</span></label>
			<img src="https://via.placeholder.com/50x15.png" alt="">
		</li>
		<li>
			<h3 class="text">dolar sit amet</h3>
			<label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 3</span></label>
			<img src="https://via.placeholder.com/150x20.png" alt="">
		</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:10px;padding:5px;background:#efefef;}
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

let $checkboxContent = $('.checkboxes-content');

$(document).on('click', '#getCheckboxesContent', function() {
 let html = $('.checkboxes :checkbox').map((i, el) => `
 <div class="item">
  <h3 class="text">${el.querySelectAll('li .text').textContent}</h3>
  Item ${i + 1}: <input type="text" value="${el.nextElementSibling.textContent}" />
	<img src="${el.querySelectAll('li img').attr('src')}" />
 </div>
 `).get();
 $checkboxContent.append(html);
});