jquery nestable losing drag/drop capability after dynamic loading nestable menu - jquery-nestable

Question

Having trouble after adding the nestable div contents dynamically from a database.
nestable with static data works as expected. I can add items from nestable2 and see the changes in Serialized Output.
nestable with dynamic data
loses the drag/drop capability from nestable2 to nestable, though drag/drop within nestable appears to still work. However, changes are not reflected in Serialized Output.
Further, it appears the dynamic data version of Serialized Output for nestable is not complete. Comparing the nestable Serialized Output between the two links shows that the nestable with dynamic data link's JSON object ends after the Metal category menu, though the full menu is displayed on that page in the nestable div and in the tshoot innerHTML.
Can anyone point me in the right direction to resolve this issue?
Thanks!
Question too vague? OK, let me add more details.
Here's some code that builds the nestable menu from JSON:
...
function buildItem(item) {
var html = "<li class='dd-item' data-id='" + item.id + "' id='" + item.id + "'>";
html += "<div class='dd-handle'>" + item.id + "</div>";
if (item.children) {
html += "<ol class='dd-list'>";
$.each(item.children, function (index, sub) {
html += buildItem(sub);
});
html += "</ol>";
}
html += "</li>";
return html;
}
$.each(JSON.parse(obj), function (index, item) {
$('#nestable2 ul').append(buildItem(item));
});
...
I compared the lists in the hardcoded version with the dynamic version and noticed the good, hardcoded version begins with an ol tag where the dynamic version begins with a ul tag (can't provide the html in this post for some reason). So I changed the code to
...
function buildItem(item) {
var html = "<li class='dd-item' data-id='" + item.id + "'>";
html += "<div class='dd-handle'>" + item.id + "</div>";
if (item.children) {
html += "<ol class='dd-list'>";
$.each(item.children, function (index, sub) {
html += buildItem(sub);
});
html += "</ol>";
}
html += "</li>";
return html;
}
$.each(JSON.parse(obj), function (index, item) {
$('#nestable2 ol').append(buildItem(item));
});
...
and made the nestable2 div start with an ol tag.
That sort of works, but now I get extra children (e.g., Plastic, Valves, Heating and Cooling, In Stock Fixtures and Misc are appended to Metal.
Valves, Heating and Cooling, In Stock Fixtures and Misc are appended to Plastic and In Stock Fixtures and Misc are appended to Heating and Cooling.
So clearly there is an issue with the if (item.children) loop.
Does anyone see the issue and maybe a proposed fix?
Here's the valid JSON:
[{"id":"Metal","children":[{"id":"Propress","children":[{"id":"Elbows","children":[{"id":"1/2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"Tees","children":[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"Couplings"}]},{"id":"Copper","children":[{"id":"Elbows","children":[{"id":"1/2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"Tees","children":[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"Couplings"}]},{"id":"Black","children":[{"id":"Elbows","children":[{"id":"1/2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"Tees","children":[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"Couplings"}]},{"id":"Brass","children":[{"id":"Elbows","children":[{"id":"1/2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"Tees","children":[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"Couplings"}]},{"id":"Cast Iron","children":[{"id":"Elbows","children":[{"id":"1/2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"Tees","children":[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"Couplings"}]},{"id":"Megapress","children":[{"id":"Elbows","children":[{"id":"1/2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"Tees","children":[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"Couplings"}]}]},{"id":"Plastic","children":[{"id":"Pipe","children":[{"id":"PVC"},{"id":"PEX"},{"id":"Aquatherm"}]},{"id":"PVC","children":[{"id":"Elbows","children":[{"id":"1/2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"Tees","children":[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"Flanges"},{"id":"Couplings"},{"id":"Caps"},{"id":"Unions"},{"id":"Reducers"},{"id":"Adapters"},{"id":"Valves"}]},{"id":"PEX","children":[{"id":"Elbows","children":[{"id":"1/2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"Tees","children":[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"Flanges"},{"id":"Couplings"},{"id":"Caps"},{"id":"Unions"},{"id":"Reducers"},{"id":"Adapters"},{"id":"Valves"}]},{"id":"Aquatherm","children":[{"id":"Elbows","children":[{"id":"1/2 90"},{"id":"1/2 45"},{"id":"3/4 90"},{"id":"3/4 45"},{"id":"1/2 LS 90"},{"id":"1/2 ST 45"}]},{"id":"Tees","children":[{"id":"1/2 x 1/2 x 3/4"},{"id":"1/2"},{"id":"3/4 x 1/2 x 1/2"}]},{"id":"Flanges"},{"id":"Couplings"},{"id":"Caps"},{"id":"Unions"},{"id":"Reducers"},{"id":"Adapters"},{"id":"Valves"}]}]},{"id":"Valves"},{"id":"Heating and Cooling","children":[{"id":"Radiant","children":[{"id":"Tubing","children":[{"id":"1/2 PEX"},{"id":"3/4 PEX"}]},{"id":"Manifolds"},{"id":"Heads"},{"id":"Valves"},{"id":"Fittings"}]},{"id":"Thermostats"},{"id":"Waterheaters"},{"id":"Pumps/Valves"},{"id":"Boilers"},{"id":"MiniSplits"}]},{"id":"In Stock Fixtures"},{"id":"Misc"}]
The JSON seen in the new Serialized Output has:
... {"id":"1/2 ST 45"},{"id":"Plastic","children":[{"id":"Pipe" ...
while the valid JSON has:
... {"id":"1/2 ST 45"}]},{"id":"Tees","children":[{"id":"1/2 x 1/2 x 3/4"} ..
Note that new Serialized Output is missing the ']}' after {"id":"1/2 ST 45"}
TIA.