JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<div class="network">
  <input type="text" id="netvar_field1">
  <input type="text" id="netvar_field2">
  <input type="text" id="netvar_field3">
</div>
<div class="tcms">
  <input type="text" id="tcmsvar_field1">
  <input type="text" id="tcmsvar_field2">
  <input type="text" id="tcmsvar_field3">
  <input type="text" id="tcmsvar_field4">
</div>
<br>
<br>
<div>
  <input type="text" id="Name1">
</div>
<div>
  <input type="text" id="Name2">
</div>

JavaScript

(function() {
  $(function() {
      var helper = {
      name_val : $("#Name").val(),
      name1_val : $("#Name1").val(),
      name2_val : $("#Name2").val(),

      // init exple 
      name_valA : "azau_grtr_ghg",
      name_valB : "azau_grtr_ghg_hghhg",

      split_name1 : this.name_valA,
      split_name2 : this.name_valB,

      netVar_fields : $("input[id^='netvar_field']"),
      tcmsVar_fields : $("input[id^='tcmsvar_field']"),

      setFieldsInput : function(fields_array, split_name_array){
        fields_array.each(function(index,field){
          $(field).val(split_name_array[index]);
        });
      },

      CheckEachFieldVal : function (regexObject, field_val){
        regexObject.forEach(function(reg){
          reg.test(fied_val)
        });   
      }  
    };

    // Set Name Inputs
    helper.netVar_fields.on("input", function(){
      var t = [];
      helper.netVar_fields.each(function(index, f){
        t[index] = $(f).val();
      });

      $("#Name1").val(t.join("_"));
      $("#Name2").val(t.join("_"));
    });


    if(helper.split_name1 !== ""){
      helper.setFieldsInput(helper.netVar_fields, helper.split_name1);
    }

    if(helper.split_name2 !== ""){
      helper.setFieldsInput(helper.tcmsVar_fields, helper.split_name2);
    }
    
    console.log(helper.name_valA);
  })
}());