JSFiddle - React, Tailwind, and code Playground

by manishie

HTML

<body>
    <div id="showData"></div>
</body>

JavaScript

var article = [
    {
        "title": "This is title no. 1",
        "text": "Here is the text of the first article"
    },
    {
        "title": "This is title no. 2",
        "text": "Here is the text of the second article"
    },
    {
        "title": "This is title no. 3",
        "text": "Here is the text of the third article"

    }
];

function getData() {
    var html = '';
    
    for(i = 0; i < article.length; i++) {
        html += "<li data-text='" + "'>" + article[i].title.link(article[i].text) + "</li>";
    }
    $('#showData').html('<ul>' + html + '</ul>');
    
    // Use jQuery 'on' to run code when any Anchor tag inside the #showData div is clicked.
    $('#showData').on('click', 'a', function(e) {
        
        // remove any previously displayed text (in divs with the .text class)
        $('#showData .text').remove();    
        
        // after the current element (the anchor tag that was clicked) add a new div with the class .text.  Inside that div, display the href attribute of the anchor tag that was clicked.
        $(this).after('<div class="text">' + $(this).attr('href') + '</div>');
        
        // disable normal anchor handling so you don't get taken to a non-existent page.
        e.preventDefault();    
        
    });
    
}

// Use jQuery $(document).ready to make sure the DOM is loaded before you run anything (http://learn.jquery.com/about-jquery/how-jquery-works/) instead of the onLoad in body.
$(document).ready(function() {
    getData();
});