JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div data-template="slider">
<div data-replicable="true">
  <h4 data-key="title" contenteditable="true">I am editable</h4>
  <div>
    <span data-key="byline" contenteditable="true">I am editable</span>
    <p data-key="copy" contenteditable="true">I am editable</p>
  </div>
</div>
<div data-replicable="true">
  <h4 data-key="title" contenteditable="true">I am editable</h4>
  <div>
    <span data-key="byline" contenteditable="true">I am editable</span>
    <p data-key="copy" contenteditable="true">I am editable</p>
  </div>
</div>
</div>

JavaScript

$('body').on('input', '[contenteditable]', function() {
	updateTemplate($(this).closest('div[data-template]'))
})


function updateTemplate(template) {
	// console.log(template);
	template.find('[data-replicable]').each(function() {
  	var testElem = {};
    $(this).find('[data-key]').each(function() {
    	testElem[$(this).data('key')] = $(this).html();
    })
    templateData[$(this).index()] = testElem;
  })

	console.log(templateData);
}


var templateData = {};