JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<table class="container">
  <thead>
    <tr>
      <th>table</th>
      <th>csv</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table"></tr>
    <tr class="csv"></tr>
  </tbody>
</table>

<a href="#" class="click">CLICK</a>

CSS

table, thead, tbody, tr, td, th {
  width: 100%;
  border: 1px solid #000;
}
td {
  display: block;
}

JavaScript

var table = ['first_name', 'random_5', 'last_name', 'file_id', 'date', 'vin', 'model', 'year'],
		csv = ['first_name', 'file_id', 'random_1', 'date', 'last_name', 'random_2', 'vin', 'model', 'year', 'random_3', 'random_4'],
    compareDiff = diff(csv, table),
    compareSame = same(csv, table),
    container = document.querySelector('.container'),
    tableBox = document.querySelector('.table'),
    csvBox = document.querySelector('.csv'),
    i, j;

function diff(a, b) {
    return a.filter(function(i) {
    	return b.indexOf(i) < 0;
    });
};

function same(a, b) {
    return a.filter(function(i) {
    	return b.indexOf(i) != -1;
    });
};

for(i = 0; i < table.length; i++) {
	// LEFT
  var td = document.createElement('td'),
  		input = document.createElement('input');
	input.type = 'text';
  input.className = "className";
  input.value = table[i];
	td.appendChild(input);
	tableBox.appendChild(td);
  // RIGTH
  var select = document.createElement('select'),  
      defaultOption = document.createElement('option');
  defaultOption.value = 0;
  defaultOption.text = 'Choose Column';
  select.appendChild(defaultOption);
  
  for(j = 0; j < csv.length; j++) {
  	var option = document.createElement('option');
    option.value = csv[j];
    option.text = csv[j];
    if (table[i] === csv[j]) {
    	option.selected = true;
    }
		select.appendChild(option);
  }
  
  td.appendChild(select);
	csvBox.appendChild(td);
}

var options = document.getElementsByTagName('select'),
		arr = [],
    obj = {},
    click = document.querySelector('.click');

click.addEventListener('click', function(e) {
	console.log(obj);
}, false);

function findAndReplace(object, value, replacevalue){
  for(var x in object){
    if(typeof object[x] == typeof {}){
      findAndReplace(object[x], value, replacevalue);
    }
    if(object[x] == value){ 
      object[x] = replacevalue;
      // break; // uncomment to stop after first replacement
    }
  }
}


    
for(var k in options) {
	
 ...