JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="users"></div>

JavaScript

$.ajax({
   url: "https://jsonplaceholder.typicode.com/users",
   success: function(users) {
      for (var i = 0; i < users.length; i++) {
         var user = document.createElement("div");
         user.id = 'user-' + users[i].id;
         user.className = 'user';
         span = document.createElement('span');
         span.innerHTML = users[i].name;
         albums = document.createElement('ul');
         albums.className = 'albums';
         user.appendChild(span);
         user.appendChild(albums);
         user.addEventListener("click", function() {
            var that = this;
            var userId = this.id.split('-')[1];
            var dest = this.getElementsByClassName('albums')[0];
            dest.innerHTML = '';
            $.ajax({
               url: "https://jsonplaceholder.typicode.com/albums",
               success: function(albums) {
                  for (var j = 0; j < albums.length; j++) {
                     if (albums[j].userId == userId) {
                        console.log(albums[j].userId, ' == ', userId);
                        var li = document.createElement('li');
                        li.innerHTML = albums[j].title;
                        dest.appendChild(li);
                     }
                  }
               }
            })
         });
         document.getElementById('users').appendChild(user);
      }
   }
});