JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="data" class="hidden">
<li value="0">
<ul>
<li value="id">1</li>
<li value="productLine">Vintage Cars</li>
</ul>
</li>
<li value="1">
<ul>
<li value="id">2</li>
<li value="productLine">Ships</li>
</ul>
</li>
<li value="2">
<ul>
<li value="id">3</li>
<li value="productLine">Trains</li>
</ul>
</li>
</ul>
JavaScript
function selectProductLine(){
var rootUlNode = document.getElementById('data');
var rootLiNodes = rootUlNode.children;
var hiddenHash = {};
for(var i=0;i< rootLiNodes.length;i++){
var rootLiNodeValue = rootLiNodes[i].getAttribute('value');
var liNodes = rootLiNodes[i].firstElementChild.children;
for(var i=0; i < liNodes.length;i++){
hiddenHash[rootLiNodeValue] = {};
var liNodeValue = liNodes[i].getAttribute('value');
var liNodeContent = liNodes[i].textContent;
hiddenHash[rootLiNodeValue][liNodeValue] = liNodeContent;
}
}
return hiddenHash;
}
document.write(selectProductLine());