JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="middle">
        <div id="inner">
            <div id="content"></div>
        </div>
    </div>
</div>
<p>Expected:<br/>inner-middle, inner-middle-outer</p>
<p>Actual:<br/><span id="actual"/></p>

JavaScript

function getID(e) { return $(e).attr('id'); }
var noAdd = $.map($('#content').parentsUntil('#outer'),getID).join('-');
var withAddOuter = $.map($('#content').parentsUntil('#outer').add('#outer'),getID).join('-');
$('#actual').text(noAdd+', '+withAddOuter);