JSFiddle - React, Tailwind, and code Playground

JavaScript

/*
SAMPLE OF DATA
===============
var data = {
    created_at: "2013-07-15T05:58:25Z",
    id: 21,
    name: "Skatelocal.ly",
    svg :  "<svg> ... </svg>",
    post_a :  "This is an awesome post 1",
    post_b :  "This is an awesome post 2",
    post_c :  "this is an awesome post 3",
    post_d :  "this is an awesome post 4"
};
*/
postInModal = function(data, status) {
      var keys;
      keys = ["post_a", "post_b", "post_c", "post_d"];
      return $.each(keys, function(i, key) {
        var val;
        val = data[key];
          
        $(".next").on({
          click: function() {
          //if val is on last index
              //reset val
              return $(".unique-post").hide().html(val).fadeIn(); //sets .modal-main to first val index
            //else  
              //val++
              return $("unique-post").hide().html(val).fadeIn(); //sets .modal-main to next val index
          }
        });
        return $(".prev").on({
          click: function() {
            //if val is on index 0
              //reset val last index
              return $(".unique-post").hide().html(val).fadeIn(); //sets .modal-main to last val index
            //else  
              //val--
              return $(".unique-post").hide().html(val).fadeIn(); //sets .modal-main to previous val index
              
          }
        });
      });
    };