JSFiddle - React, Tailwind, and code Playground
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');
console.log(arrayOfLines);
var arrayOfWords = arrayOfLines[1].split(" ");
document.getElementById("seg1").innerHTML = arrayOfWords[0];
document.getElementById("seg2").innerHTML = arrayOfWords[1];
}