JSFiddle - React, Tailwind, and code Playground

HTML

<datalist id="tagList">
      <option value=""></option>
      <option value="CSCI 4950">Senior Software Project</option>
      <option value="CSCI 5117">Developing the Interactive Web</option>
      <option value="CSCI 5421">Advanced Algorithms</option>
      <option value="CSCI 5980">Design Methods for Comp. Sci.</option>
    </datalist>

<div id="showlist"></div>

<button id="splitthis" >click here for split example</button>

<div id="splitted"></div>
<br>
<input type="text" id="searchbox"></input> Search here<br>
<button id="searchoptions"> Search Example </button><br>

<div id="searched"></div>

JavaScript

var i = 0;
var selectItems = {}
$('#tagList option').each(function() {
    var listvalue = $(this).val();
    var listtext = $(this).text();
    selectItems[i] = listvalue + " " + listtext + ",";
    i++;
});
count = i;
for(i=0; i < count;i++) {
    prevtext = $("#showlist").html();
$('#showlist').html(prevtext + "<br>" + selectItems[i]);
}

$("#splitthis").on("click", function() {
 var texttosplit = $("#showlist").html().split(",");
    for(i=0; i < texttosplit.length; i++) {
     $("#splitted").html($('#splitted').html() + '<br>' + texttosplit[i]);   
    }
 
});

$("#searchoptions").on("click", function() {
    var searchvalue = $("#searchbox").val();
    alert(searchvalue);
    var i = 0;
var selectItems = {}
$('#tagList option').each(function() {
    var listvalue = $(this).val();
    var listtext = $(this).text();
    selectItems[i] = listvalue + " " + listtext + ",";
    i++;
});
    count = i;
   for(i=0; i < count;i++) {
var blockoftext = blockoftext + " " + selectItems[i].toLowerCase() + ",";
   }
    var texttosplit = blockoftext.split(",");
 
    var searchresults;
    
    for(i=0; i < texttosplit.length; i++) {
        (texttosplit[i].indexOf(searchvalue.toLowerCase()) != -1) ? (searchresults = texttosplit[i] + "<br>") : false;
        $("#searched").html(searchresults);
    }
       
});