JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Apples, trees, flowers, cats</h1>

Search for a phrase: <input type="text"> <button id="b1">Search</button>

<p id="result"></p>

<p>Unsorted items: <span id="number">[1,4,23,31,5]</span></p>
<button id="b2">Sort ascending</button>
<button id="b3">Sort descending</button>
<p id="sorted">

JavaScript

// The search function
$("#b1").click(function(){
    var q = $("input").val();
    var text = $("h1").text();
    if (text.search(q) != -1)
        $("#result").text("Found your phrase at position: " + text.search(q));
    else
        $("#result").text("Not Found");
});

// Sorting functions

var numbers = JSON.parse($("#number").text());
// JSON.parse() takes a string and converts it into an object
// JSON.stringify() takes an object and converts it into a string
$("#b2").click(function(){
    numbers.sort(function(a,b){return a - b;});
    $("#sorted").text(JSON.stringify(numbers));
});

$("#b3").click(function(){
    numbers.sort(function(a,b){return b - a;});
    $("#sorted").text(JSON.stringify(numbers));
});