JSFiddle - React, Tailwind, and code Playground

by Cale Bergh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.2.1/js/jquery.circliful.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.2.1/css/jquery.circliful.css">
<div class="grid">
</div>

CSS

.grid {
  border: 1px solid black;
}

.grid-item {
  border: 1px solid red;
}

JavaScript

var data = [{
    "id": 1,
    "full_name": "Ignacius Antos",
    "email": "[email protected]",
    "password": "FK4umZJ9eh",
    "profile_picture": "https://i.pravatar.cc/255?img=5",
    "list_of_items_bought": "",
    "rating": "25",
    "time_spent": "15"
  },
  {
    "id": 2,
    "full_name": "Anallise Ousley",
    "email": "[email protected]",
    "password": "5fLR4WhC",
    "profile_picture": "https://i.pravatar.cc/255?img=56",
    "list_of_items_bought": "",
    "rating": "30",
    "time_spent": "30"
  }
];

jQuery(function($) {
  $.each(data, function(key, value) {
    var profile_data = '';
    // ... other code here
    profile_data += '<div class="grid-item grid-item--width3 grid-item--height3 myStat" data-animation="1" data-animationStep="3" data-percent="' + value.rating + '"></div>';
    // append each one within the each loop    
    $('.grid').append(profile_data);
  });
  $(".myStat").circliful({});
});