JSFiddle - React, Tailwind, and code Playground

by DelightedD0D

HTML

<div align="center" style="padding-bottom:15px">
    <textarea style="overflow:hidden" class="sked" rows="18" cols="50" name="fltInput" id="fltInput" onfocus="resetGsts()">Houston (IAH) to Cancun (CUN) - Fri, Jul 12	
United	United 1084	Dep: 6:58PM	Arr: 9:15PM	2h 17m	Boeing 737	 Economy (E)	  
 
 
Cancun (CUN) to Houston (IAH) - Sun, Jul 14	
United	United 1017	Dep: 2:00PM	Arr: 4:23PM	2h 23m	Boeing 737	 Economy (E)
</textarea>
</div>
<br />
<div align="center" style="padding-bottom:15px">
    <input id="scaleSlider" type="range" value="0" min="0" max="9" step="1" onchange="showValue(this.value);" />
</div>
<div align="center" style="padding-bottom:15px"><span class="slider">Guests</span>  <span class="slider" id="range">0</span>
</div>
<br />

<table width="100%" border="0" align="center">
  <tr>
      <td align="center" ><strong>Contents of array's slot 0:</strong>  <span class="seg1" id="seg1" onclick="selectText('seg1')"></span></td>
  </tr>
    <tr>
    <td align="center"><strong>Contents of array's slot 1:</strong>  <span class="segment" id="seg2" onclick="selectText('seg2')"></span> </td>
  </tr>
</table>

JavaScript

function showValue(newValue)
{
	document.getElementById("range").innerHTML=newValue;
     convertItin();
    
}

function convertItin() {

var arrayOfLines = document.getElementById("fltInput").value.split('\n');
var arrayOfWords = arrayOfLines[1].split(" ");

document.getElementById("seg1").innerHTML = arrayOfWords[1];
document.getElementById("seg2").innerHTML = arrayOfWords[2];    
    
    
}