javascript - jsTree open_all only showing last item in JSON array -

i relatively new working jquery , jstree. in application call api, , want display resulting json using jstree. sample using fake api call http://jsonplaceholder.typicode.com/posts/?userid=1

however, when page loads, last item in array "open" , if click on other items shows data last item. here's stripped down version: http://jsfiddle.net/7sal0t83/ , here screenshot of phenomenon experiencing

html:

 <div id="jstree">  <ul>      <li>[list]:          <ul>             <li id="userid" value="1">                 userid: 1             </li>             <li id="id" value="1">                 id: 1             </li>             <li id="title" value="&quot;sunt aut facere repellat provident occaecati excepturi optio reprehenderit&quot;">                 title: sunt aut facere repellat provident occaecati excepturi optio reprehenderit             </li>             <li id="body" value="&quot;quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto&quot;">                 body: quia et suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto             </li>            </ul>     </li>     <li>[list]:          <ul>             <li id="userid" value="1">                 userid: 1             </li>             <li id="id" value="2">                 id: 2             </li>             <li id="title" value="&quot;qui est esse&quot;">                 title: qui est esse             </li>             <li id="body" value="&quot;est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla&quot;">                 body: est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla             </li>         </ul>      </li>  </ul>  </div> 

javascript:

$(function () {     $('#jstree').jstree( {         "core" : {             "animation":0,             "themes": { "icons" : false, "responsive": true }         },         "plugins" :["checkbox","state"]     })     .bind("ready.jstree", function (event, data) {          //open nodes once ready event triggered         $(this).jstree("open_all");     });     $('#jstree').on("changed.jstree", function (e, data) {         console.log(data.selected);     }); }); 

if view html source code of page, data there, why open last item in array? when clicking on other array items why show data last one?

thanks!

(my code on jsfiddle)

you have duplicated ids - jstree can not parse structure properly. jstree not allow duplicated ids inside 1 tree (also keep in mind, should not duplicate ids on document level).

either remove id attribute on each li node, or make sure unique inside tree.