Highlight HTML Elements in Preview when clicked in the Code Editor

I am doing a code editor a bit like the chrome inspector where the highlighted HTML tag corresponds to a highlighted element in the preview.

I have almost everything working, I have a function that will highlight the h1 element by giving it the XPath from the document root.

Is there an easier way to do this?

If not, is there a way to know what tag I clicked and highlighted in the code editor so I can get the XPath.

In CodeMirror 5, not really. In 6, you could use the syntax tree to find the correspondence between syntactic constructs and source locations.