[QUESTIONS]: how to handle more sector of traits

I want to add more Structure sector as below :
// Add Settings Sector
        var traitsSector = $('<div class="gjs-sm-sector no-select">'+
          '<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span> Settings</div>' +
          '<div class="gjs-sm-properties" style="display: none;"></div></div>');
        var traitsProps = traitsSector.find('.gjs-sm-properties');
        traitsProps.append($('.gjs-trt-traits'));
        $('.gjs-sm-sectors').before(traitsSector);
        traitsSector.find('.gjs-sm-title').on('click', function(){
          var traitStyle = traitsProps.get(0).style;
          var hidden = traitStyle.display == 'none';
          if (hidden) {
            traitStyle.display = 'block';
          } else {
            traitStyle.display = 'none';
          }
        });
		
		// Add Settings Structure
        var traitsSector_more = $('<div class="gjs-sm-sector no-select">'+
          '<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span> Structure</div>' +
          '<div class="gjs-sm-properties" style="display: none;"></div></div>');
        var traitsProps_more = traitsSector_more.find('.gjs-sm-properties');
        traitsProps_more.append($('.gjs-trt-traits'));
        $('.gjs-sm-sectors').before(traitsSector_more);
        traitsSector_more.find('.gjs-sm-title').on('click', function(){
          var traitStyle_more = traitsProps_more.get(0).style;
          var hidden = traitStyle_more.display == 'none';
          if (hidden) {
            traitStyle_more.display = 'block';
          } else {
            traitStyle_more.display = 'none';
          }
        });
I don't know what to do that I may be handle blinding data into the above 2 sector when I click on any the component.
as far as I can see Its problems :
![Capturecs](https://user-images.githubusercontent.com/55629233/77134003-c53df780-6a97-11ea-81e7-7cb586cfd08d.PNG)