JSFiddle - React, Tailwind, and code Playground

by fkling

HTML

<div id="foo" class="div_abcd">
    <div id="CONT1">
        <ul>
            <li id="foo1">Foo1</li>
            <li id="foo2">Foo2</li>
        </ul>
    </div>
    <div id="CONT2">
        <ul>
            <li id="foo11" class="placeholder">Foo11</li>
            <li id="foo22">Foo22</li>
        </ul>
    </div>
</div>
<div id="bar" class="div_abcd">
    <div id="CONT11">
        <ul>
            <li id="bar1">bar1</li>
            <li id="bar2" class="placeholder">bar2</li>
        </ul>
    </div>
</div>
<div id="msg"></div>

JavaScript

var values = {};
jQuery(".div_abcd").each(function(){
    var a = values[this.id] = [];
    jQuery("div[id^='CONT']", this).each(function(){
        var obj = {};
        obj[this.id] = jQuery("li", this).map(function() {
            if (jQuery(this).is(".placeholder")){
                return "placeholder";
            }
            return this.id;        
        }).get();
        a.push(obj);
    });
});
values = JSON.stringify(values);
$('#msg').text(values);