This the single panel that Alex is using https://github.com/radmanovi4/prefsEditors/blob/divide-and-conquer/src/shared/adjusters/js/speakTextCollectivePanel.js. You can see that it uses grade merging to combine all the individual panels together into one, but that he had to create a single prototree since the prototrees don't merge.

So in your case, it looks like you have the gradeNames, but your protoTree only has one entry. Also, you'll need to have a single template file that has the parts for all of the markup that is to be rendered. Since you are already going to be using the renderer you should switch from using jQuery to the renderer to set text.