JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div id="searchresult">
     <h3>Search Results...</h3>

    <div class="course"> <a href="#">
            <span>Kite Flying 101</span> 
        </a>

    </div>
    <div class="course"> <a href="#">
            <span>Math 110</span> 
        </a>

    </div>
</div>
<div class="selected-box" id="selected-box">
    	<h3>Selected Courses...</h3>

    <div class="selected-course"> <a href="#">Kittens 402</a>

    </div>
</div>

JavaScript

$(document).on("click", "div.course", function () {
    var title = $(this).find("span").text().trim();
    var match_found = 0;

    if ($(".selected-course").length > 0) {
        match_found = match(title);
    }
    if (match_found == 0) {
        var out = '';
        out += '<div class="selected-course">' + '<a href="#">' + title + '</a>' + '</div>';
        $("#selected-box").append(out);
    }
});

function match(str) {
    var retval = 0;
    $(".selected-course").each(function () {

        if (str == $(this).find('a').text().trim()) {
            retval = 1;
            return false;
        }
    });
    return retval;
}