JSFiddle - React, Tailwind, and code Playground

HTML

<input type='button' id='load' value='Load_info' />
<div id='ok'>
    <ul id='pic_info'></ul>
</div>
<div id='message'></div>
<input type='button' id='bye' value='Bye[0]' />

JavaScript

var files = ["Chrysanthemum.jpg (image/jpeg) - 879394 bytes, last modified: 13/7/2009", "Desert.jpg (image/jpeg) - 845941 bytes, last modified: 13/7/2009", "Hydrangeas.jpg (image/jpeg) - 595284 bytes, last modified: 13/7/2009", "Jellyfish.jpg (image/jpeg) - 775702 bytes, last modified: 13/7/2009", "Koala.jpg (image/jpeg) - 780831 bytes, last modified: 13/7/2009", "Lighthouse.jpg (image/jpeg) - 561276 bytes, last modified: 13/7/2009", "Penguins.jpg (image/jpeg) - 777835 bytes, last modified: 13/7/2009"];

var once = 0;
var a = '';
var d = '';
//someFlag = true;
//var upd = [];


function load() {
    for (var i = 0; i < files.length; i++) {
        a += "<li>" + files[i] + "</li>";
        $("#pic_info").html(a);
        e = $("#pic_info li").length;
    }
}



function delete_item(arr, inx) {

    //for (var c = 0; c < arr.length; c++) {
      //  d += "<li>" + arr[c] + "</li>";
        //$("#pic_info").html(d);
    //}
    arr.splice(inx, 1);
    $("#pic_info").html(arr);
}

$("#load").click(function () {
    if (once == 0) {
        load();
        once = 1;
    } else {
        $("#message").html("<strong>files already loaded</strong>");
    }
});

$("#bye").click(function () {
    delete_item(files, 0);
});