JSFiddle - React, Tailwind, and code Playground

by Mawel Don

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
            <div class="row">
                <a><span class="contentSearch">Raspberry</span></a>&nbsp; - &nbsp;<a><span class="contentSearch">Everything</span></a>&nbsp;&nbsp;<span class="contentSearch"></span>
                <input type="text" placeholder="Affiner votre recherche" id="cleaningFeed"> - <a id="chrono">Chronologique</a>
                <br><br>
            </div>
<ul class="feedEkList">
    <li>
        <div class="itemTitle"><a href="http://www.nasa.gov/press-release/nasa-works-to-improve-solar-electric-propulsion-for-deep-space-exploration" target="_blank">NASA Works to Improve Solar Electric Propulsion for Deep Space Exploration</a></div>
        <div class="itemDate">04/19/2016</div>
        <div class="itemContent">NASA has selected Aerojet Rocketdyne, Inc. of Redmond, Washington, to design and develop an advanced electric propulsion system that will significantly advance the nation's commercial space capabilities, and enable deep space exploration missions,
            including the robotic portion of NASA’s Asteroid Redirect Mission (ARM) and its Journey to Mars.</div>
    </li>
    <li>
        <div class="itemTitle"><a href="http://www.nasa.gov/press-release/nasa-astronaut-to-call-columbia-university-students-from-international-space-station-0" target="_blank">NASA Astronaut to Call Columbia University Students from International Space Station</a></div>
        <div
        class="itemDate">04/15/2016</div>
            <div class="itemContent">Students from Columbia University in New York will have the opportunity to speak with a NASA astronaut currently living and working on the International Space Station at 1:10 p.m. EDT Thursday, April 21. The 20-minute, Earth-to-space call
                will air live on NASA Television and the agency’s website.</div>
    </li>
    <li>
        <div class="itemTitle"><a...

CSS

.feedEkList *{
  color: green;
}

.row *{
  color : purple;
}

JavaScript

/* Tri chronologique */
$('#chrono').on('click',function(){
    $('option:first').prop('disabled',true);
    /* Affiche la date en format de date */
    $('.itemDate').each(function(){
       var date = new Date($(this).text())
       $(this).text(date);
    })
    /* UseLess mais interessant */
    $('.itemDate').each(function(){
        $(this).parent().data('date',$(this).text())
    })
    /* Tri par date */
    $('.temp ul').empty();
    $('.feedEkList li').sort(function(a, b) {
        var aDate = $(a).find('.itemDate').text();
        var bDate = $(b).find('.itemDate').text();
        return new Date(bDate).getTime() - new Date(aDate).getTime();
    }).appendTo('.temp ul');
    $('.feedEklist').empty();
    $('.temp ul').appendTo('#divRss');


})

/* Type your search */
$('#cleaningFeed').keyup(function(event){
    $('.feedEkList li').css('display','none');
    var $typed = $(this).val();
		var regExp = new RegExp ($typed,'i');
    $('.itemTitle, .itemContent').each(function(){
    	if($(this).text().match(regExp)) $(this).parent('li').css('display','block');  
    })
});

/* Specific recherche */
$('.contentSearch').on('click',function(){
    $('input').val('')
    $tri = $(this).text();
    if($(this).text() == "Everything")
    {
        $('.itemContent').closest('li').show();
    } else {
        $('.itemContent').closest('li').hide();
        $('.itemContent, .itemTitle').each(function(){
        var regExp = new RegExp ($tri,'i');
            if($(this).text().match(regExp))
            {
                $(this).closest('li').css('display','block');
            }  
       })
    }
})