JSFiddle - React, Tailwind, and code Playground

by asdf

HTML

<section class="one">
  <article>
    <header>
      <h2>Article title</h2>
      <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">Jan 4th 2009</time> by <a href="#">Writer</a></p>
    </header>
    <p>Pellentesque habitant morbi tristique.</p>
  </article>
  <article>
    <header>
      <h2>Article title</h2>
      <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">Jan 5th 2009</time> by <a href="#">Writer</a></p>
    </header>
    <p>Pellentesque habitant morbi tristique.</p>
  </article>
</section>

<section class="two">
  <article>
    <header>
      <h2>Article title</h2>
      <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">Jan 6th 2009</time> by <a href="#">Writer</a></p>
    </header>
    <p>Pellentesque habitant morbi tristique.</p>
  </article>
  <article>
    <header>
      <h2>Article title</h2>
      <p>2 Posted on <time datetime="2009-09-04T16:31:24+02:00">Jan 7th 2009</time> by <a href="#">Writer</a></p>
    </header>
    <p>Pellentesque habitant morbi tristique.</p>
  </article>
</section>

JavaScript

// Given a node from a DOM tree find the node in the same position from an identical DOM tree.
function getNode(node, root1, root2) {
	var path = [];
  var parent, children, i;
  child = node;
  // build path up
	while (parent !== root1) {
  	parent = child.parentElement;
  	children = parent.childNodes;
    for (i=0; i<children.length; i++) {
    	if (children[i] === child) {
      	path.push(i);
        break;
      }
    }
    child = parent; 
  }
  parent = root2;
  while (path.length) {
  	child = parent.childNodes[path.pop()];
    parent = child;
  }
  return child;
}

var node = document.querySelectorAll('.one article')[1].querySelector('header p');
var root1 = document.querySelector('.one');
var root2 = document.querySelector('.two');
console.log(getNode(node, root1, root2));