List/Array Trait

Hello,

I am trying to write up a trait that allows creating a list of forms and generates the respective in the model. So far I have this:

editor.TraitManager.addType('list', {
  events: {
    'keyup': 'onChange'
  },
  getInputEl: function() {
    var self = this;
    var idx = 1;
    function createForm(input) {
      self.model.attributes.options.map(function(m) {
        // TOOD: Add select options
        // console.log(m);
        if (m.type === 'select') {
          var s = $('<select name="'+ m.name +'"></select>').get(0);
          s.appendChild($('<option value="">'+ m.placeholder +'</option>').get(0));
          m.options.map(function(opt) {
            s.appendChild($('<option value="'+ opt.value +'">'+ opt.name +'</option>').get(0))
          })
          input.appendChild(s);
        } else {
          input.appendChild($('<input name="'+ m.name +'" placeholder="'+ m.placeholder +'"/>').get(0))
        }

      });
      input.appendChild($('<button id="'+ idx +'" class="btn btn-sm btn-danger pull-left"><i class="fa fa-minus"></i> Remove</button>').get(0))
    }
    if (!this.inputEl) {
      var input = document.createElement('div');
      var btn = $('<button class="btn btn-sm btn-default"><i class="fa fa-plus"></i> Add</button>');
      // Listen for clicks on add button and add to the model
      btn.on('click', function(ev) {
        // var id = $(ev.currentTarget).data('');
        idx += 1;
        createForm(input);
      });
      input.appendChild(btn.get(0));
      createForm(input);
      // input.value = this.target.get('content');
      this.inputEl = input;
    }
    return this.inputEl;
  },
  onValueChange: function () {
    console.log(this.model.get('value'));
    this.target.set('list', this.model.get('value'));
  }
});

The current issues I am unable to bind the resulting elements to the onChange event listeners. Will I have to manually wire up each element to a listener? If so how would I proceed to update the form's model?

Thank you.