Display views with different parameters

Hello experts,

I have problems with views need your help.

I want to create multiple views with the same view.xml and controller.js but different parameters passed to the views.

For example: I have a child view with an Input id=txtValue_xxx. I use for-loop to create child views with the same view.xml and controller.js. So finally, I want to have 5 Inputs with id=txtvalue_0

id=txtvalue_1

id=txtvalue_2

id=txtvalue_3

id=txtvalue_4

From parent View controller.js, I want to have 5 child views with different Characteristic

for (var i = 0; i < 5; i++) {

var rowData = {Characteristic: i};
var fnControlPreprocessor = function(controls, info, settings) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      controls.getController().setData(rowData);
      resolve(/*return value is irrelevant for 'controls'*/);
    }, 500); // Timeout just for the effect :)
  });
};

sap.ui.xmlview('InspLotCharInputFormItem_' + i, {
  viewName: "OperatorUI.InspLotCharInputFormItem",
  async: true,
  preprocessors: {
    controls: {
      preprocessor: fnControlPreprocessor,
      message: "XML view with 'controls' preprocessor:"
    }
  }
}).loaded()
.then(function(oView) {
  var oLayout = that.getView().byId("inspInputFormItems");
  oLayout.addContent(oView);
});
}

This is the parent view.xml

<mvc:View controllerName="OperatorUI.MyParentView"
          xmlns="sap.m"
          xmlns:mvc="sap.ui.core.mvc" 
          >
  <Page
    showHeader="false"
    enableScrolling="true"
    class="sapUiContentPadding"
    showNavButton="false"
    >
    <content>
      <Panel id="inspInputFormItems" />
    </content>
  </Page>
</mvc:View>

Child view.xml

<mvc:View controllerName="OperatorUI.InspLotCharInputFormItem"
          xmlns="sap.m"
          xmlns:mvc="sap.ui.core.mvc">
  <Page
    showHeader="false"
    enableScrolling="true"
    class="sapUiContentPadding"
    showNavButton="false"
    >
    <content>
      <Panel id="inspInputFormItemsContent" />
    </content>
  </Page>
</mvc:View>

Child controller.js

sap.ui.define([
  'jquery.sap.global',
  'sap/ui/core/mvc/Controller',
  'sap/ui/model/json/JSONModel'

], function(jQuery, Controller, JSONModel) {
  "use strict";

  var rowData = {};

  var Controller = Controller.extend("OperatorUI.InspLotCharInputFormItem", {

    setData : function (rowData) {
      this.rowData = rowData;
    },

    onInit : function () {
      var valueInput = new sap.m.Input('txtValue_'+ this.rowData.Characteristic, {
              value: ''});

      var oLayout = this.getView().byId("inspInputFormItemsContent");
      var panel = new sap.m.Panel();
      panel.addContent(valueInput);
      oLayout.addContent(panel);
    },

  });

  return Controller;

});

But it shows me error: adding element with duplicate id 'txtValue_4'

And seems like the controllers load only the last data with Characteristic=4.

Could you please help me?