JSFiddle - React, Tailwind, and code Playground
HTML
<iframe src="/echo/html" id="iframe1" class="containerFrame"></iframe>
<iframe src="/echo/html" id="iframe2" class="containerFrame"></iframe>
<script>
//ignore this script, its here just to put the textareas in the iframes....
iframe1.onload = function() {
iframe1.contentWindow.document.body.innerHTML = '<textarea></textarea>';
}
iframe2.onload = function() {
iframe2.contentWindow.document.body.innerHTML = '<textarea></textarea>';
}
</script>
JavaScript
$(function() {
$('.containerFrame').each(function() {
var frame = this;
$(frame.contentWindow.document.body).on('input', 'textarea', function() {
var textarea = $(this);
$(".containerFrame").not(frame).each(function() {
$('textarea', this.contentWindow.document).val(textarea.val());
});
});
})
})