JSFiddle - React, Tailwind, and code Playground

by Pranesh456

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <div id="skills-mobile">
     <!-- popup content -->
     <div id="myModal" class="modal">
         <img class="close-icon" src="img/close-icon.png" alt="cross or close the window icon">
         <article class="modal-content">

         </article>
     </div>
 </div>

JavaScript

var skills = [
        {
            "id":"html-5",
            "skill":"HTML5",
        },
        {
            "id":"css-3",
            "skill":"CSS3"
        },
        {
            "id":"jvscrpt",
            "skill":"Javascript"
        },
        {
            "id":"inter-map",
            "skill":"Interaction Mapping"
        },
        {
            "id":"wire",
            "skill":"Wireframing"
        },
        {
            "id":"docum",
            "skill":"Documentation"
        },
        {
            "id":"adobecc",
            "skill":"Adobe CC"
        }
    ]
    var clearModal = function() {
      $('#myModel').css('display', 'none')
      $(".modal-content").empty();
    }
    var skillSlideshow = function() {

        for(var i = 0; i < skills.length; i++) {

            $('#skills-mobile').append('<img id="' + skills[i].id + '" class="skill-img" data-toggle="modal" data-id="107" data-index="'+ i +'"src="' + skills[i].iconurl + '" />')
        }
        $('.skill-img').on('click', function(e) {
          $('#myModel').css('display', 'block');
          var data = skills[parseInt(e.currentTarget.dataset.index)]
          //injecting the data into the modal
          const html = "<div>id:" + data.id + "</div><div>skill:" + data.skill + "</div>"
          $('.modal-content').html(html)
        })
        
        $('.close-icon').on('click', clearModal)
        $('#myModal').on('click', function(e) {
        console.log(e.target)
          if(e.target.id === 'myModal') clearModal()
        })
    };
    skillSlideshow();