JSFiddle - React, Tailwind, and code Playground

HTML

<!-- copied from jqm's multipage template --->
<!-- Start of page: #keywords -->
<div data-role="page" id="keywords">
    <div data-role="header">
        	<h1>search URLs via ajax calls</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
        <form>
            <label for="keywords">keyword(s) (space-separated, can be regexp):</label>
            <input id="keywords" name="keywords" value="jupiter banana content.*green">
        </form>
        <p><a href="#results" class="ui-btn ui-shadow ui-corner-all" data-rel="dialog" data-transition="pop">Show results</a>

        </p>
        <p>Possible keywords are <i>apple, banana, blue, content, end, fifth, first, for, fourth, green, is, jupiter, mars, one, orange, red, second, the, third, this, three, two, url, venus</i>

        </p>
        <p>No Keywords shows all urls.</p>
        <p>This demo uses <a href="http://doc.jsfiddle.net/use/echo.html" target="_blank">jsFiddle's /echo/html</a>
and simulated content for ajax calls, because this technique only works on either the same domain or needs cross domain allowance for URLs from other domains (see "<a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_blank">Cross-origin resource sharing</a>").</p>
    </div>
    <!-- /content -->
    <div data-role="footer" data-theme="a">
        	<h4>end of page</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page one -->
<!-- Start of page: #results -->
<div data-role="page" id="results">
    <div data-role="header" data-theme="b">
        	<h1>Results</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
        <div id="resultContainer"></div>
        <p><a href="#keywords" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left">close</a>

        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>end of page</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page popup -->

JavaScript

// a list of urls on the same domain (here jsfiddle) because of same-origin-rules
// that's why this fiddle contains jsfiddle-ajax-simulation-urls only
var urls = [
    "https://www.rangali.ro/",
    "https://www.biodiva.ro/"];

// jsfiddle-demo only: this array simulates html content from the urls
// use words from here as keywords
var simulatedDoms = [
    "<p>content for the first url</p><p>apple, banana, orange</p>",
    "<p>content for the second url</p><p>red, green, blue</p>",
    "<p>content for the third url</p><p>mars, venus, jupiter</p>",
    "<p>content for the fourth url</p><p>one, two, three</p>",
    "<p>content for the fifth url</p><p>this is the end</p>"];

$(":mobile-pagecontainer").on("pagecontainershow", function (event, ui) {

    var ap = $("body").pagecontainer("getActivePage");

    if (ap.attr("id") === "results") {

        var keywords = ui.prevPage.find("#keywords").val(),
            keywordArray = keywords !== undefined ? keywords.split(" ") : [""];

        // drop last results
        $("#resultContainer").empty();

        // traverse urls
        $.each(urls, function (urlidx, value) {
            var req = $.ajax({
                url: value,
                dataType: "html",
                // jsfiddle-demo only: just simulating page content in order to
                // produce a runnable ajax fiddle
                data: {
                    html: simulatedDoms[urlidx]
                },
                method: 'post'
            });
            // don't forget to implement "fail" or "always"
            req.done(function (data) {
                if (data !== undefined && data.length > 0) {
                    $.each(keywordArray, function (index, value) {
                        if (data.match(value)) {
                            var k = value.length > 0 ? value : "no keywords given";
                            // append one link when content matches a keyword
                            var clickableURL = "<a href='" +...