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

//Edit
var $name_val = $("#Name").val();
var $name1_val = $("#Name1").val();
var $name2_val = $("#Name2").val();

// init exple 
$name_val1 = "azau_grtr_ghg";
$name_val2 = "azau_grtr_ghg_hghhg";

var $split_name1 = $name_val1.split("_");
var $split_name2 = $name_val2.split("_");

var $netVar_fields = $("input[id^='netvar_field']");
var $tcmsVar_fields = $("input[id^='tcmsvar_field']");

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

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

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



if($split_name1.length <= 3){
	setFieldsInput($netVar_fields, $split_name1);
}

if($split_name2.length = 4){
	setFieldsInput($tcmsVar_fields, $split_name2);
}