How show tagged file from server via checkbox menu?

I am making a simple portfolio viewing site for a friend.

She would like to have a folder on the server where she can throw files in, and then have them shown on a webpage, (because she is not a coder herself), which I have working via php:

      var folder = "images/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find('a').attr("href", function (i, val) {
          if( val.match(/\.(jpe?g|png|gif)$/)) {
            $("body").append( "<img src='"+ folder + val +"'>" ); }
          if( val.match(/\.(mpe?g|mp4|mov)$/)) {
            $("body").append( "<video height='400' autoplay><source src='"+ folder + val +"'></video>" ); }
          if( val.match(/\.(pdf)$/)) {
            $("body").append( "<embed src='"+ folder + val +"'type='application/pdf' height='500px' width='400px' />" ); }
        }); } });</script>

Then she would like a clickable index-menu as a checkbox to show/hide files with the same tags. So for instance: show all files with the tag "video" and "inspiration".

I thought I could put the tags in the filenames, and then parse them out and use them as a class to give a visible/hidden css to, and even though that all sounds very doable, I don't know which order to write this in and i'm missing php/javascript vocabulaire. Is this idea possible and how would i write this?

It would look the same as this: https://jsfiddle.net/gptrhze1/2/?fbclid=IwAR0XUcuJCF3_ellJXfXd8oJkqmgieucItokT1UpAmcKHkjP4nJQFPYom5Mk, but here the images are coded in instead of from a folder on the server.