JSFiddle - React, Tailwind, and code Playground

by alwayshelping

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
  </head>
  <body>
    <div class="modal is-active">
       <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Modal title</p>
          <button class="delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
          
        </section>
        <footer class="modal-card-foot">
          <button class="button is-success">Save changes</button>
          <button class="button">Cancel</button>
        </footer>
      </div>
    </div>
  </body>
</html>

JavaScript

var array = [
  {"id":"200925","image_name":"IMG_7160.JPG","img_seq":"1"}, 
  {"id":"200929","image_name":"IMG_7161.JPG","img_seq":"2"}, 
  {"id":"201014","image_name":"IMG_7183.JPG","img_seq":"3"}
]

array.forEach(function(element){
     $('.modal-card-body').append('<b>Seq:</b>'+element.img_seq+' - <b>ID:</b>'+element.id+' - <b>Name:</b>'+element.image_name+'<br>')
});