How to generate hierarchy with generated div and <select> tag ?

How to generate hierarchy with generated div and <select> tag ?

I have to do some forms and generate div with them but that's not my problem here.

Actually, I would like to know how create something like a hierarchy between this generated div, and the main actor will be the <select> tag.


Here is an image of what I would like to have. For exemple when I create a chapter and I related it to the Book 1 I just generated before, then the chapter append inside the right "book" div. Or another example if I want to create a specific Line block. I want it in the right Chapter block itself in the right Book block.

Someone told me to use selectors but I'm very new to Jquery and don't know at all how to use it well. Here is my actual code on Fiddle : https://jsfiddle.net/Uxrieg/hctr0xbh/51/