JSFiddle - React, Tailwind, and code Playground

by brunomuller

HTML

<div>
  <textarea name="field1" id="field1" class="inputField" cols="30" rows="20">
tech</textarea>
  <textarea name="field1" id="field2" class="inputField" cols="30" rows="20">
2017
2018
2019</textarea>
  <textarea name="field1" id="field3" class="inputField" cols="30" rows="20">Q1
Q2
Q3</textarea>
  <textarea name="field1" id="field4" class="inputField" cols="30" rows="20"></textarea>
  
  <button class='btn-results'>Get Results</button>
  <p>Result</p>  
  <textarea name="result" id="result" class="result" cols="100" rows="30"></textarea>
</div>

CSS

.inputField {
  width: 23%;
  display: inline-block;
}

.button {
  display: block;
}

.result {
  width: 100%;  
}

JavaScript

let field1 = $('#field1');
let field2 = $('#field2');
let field3 = $('#field3');
let field4 = $('#field4');

$('.btn-results').on('click', getResuts);

let resultArray = [];

function getResuts(){
  concat(resultArray);
}

function concat(string) {
	let field1Array = field1.val().split('\n');
  let field2Array = field2.val().split('\n');
  let field3Array = field3.val().split('\n');
  let field4Array = field4.val().split('\n');
  resultArray = [];
	
  
  for (var i = 0; i < field1Array.length; i++) {
  	var tempStr = field1Array[i];
    
    for (var z = 0; z < field2Array.length; z++) {
    		var temp2Str = tempStr + " " + field2Array[z];
        resultArray.push(temp2Str)
        
        if(field3Array.length){
        	console.log(field3Array.length);
          for (var x = 0; x < field3Array.length; x++) {
          	var temp3Str = temp2Str + " " + field3Array[x];
          	resultArray.push(temp3Str)
            
           	if(field4Array.length){
							for (var k = 0; k < field4Array.length; k++) {
                var temp4Str = temp3Str + " " + field4Array[k];
                resultArray.push(temp4Str)
              }
           	}
           }
        }
        
    }
  
  }
  
  $('#result').val('');
  $('#result').val(resultArray.join("\n"));
  
  
  console.log(resultArray);
  
}