JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overview">[{"k":"Model","v":"box"},{"k":"Color","v":"blue"},{"k":"Size","v":"med"},{"k":"Type","v":"good"}]</div>
<div class="overview">[{"k":"Model","v":"box"},{"k":"Color","v":"blue"},{"k":"Size","v":"med"},{"k":"Type","v":"good"}]</div>
<div class="overview">x</div>
<div class="overview">[{"k":"Model","v":"box"},{"k":"Color","v":"blue"},{"k":"Size","v":"med"},{"k":"Type","v":"good"}]</div>
<div class="overview">[{"k":"Model","v":"box"},{"k":"Color","v":"blue"},{"k":"Size","v":"med"},{"k":"Type","v":"good"}]</div>
<div class="overview">[{"k":"Model","v":"box"},{"k":"Color","v":"blue"},{"k":"Size","v":"med"},{"k":"Type","v":"good"}]</div>

JavaScript

jQuery('.overview').each(function () {
       var $overview = jQuery(this),
           specs = jQuery.parseJSON($overview.html());
       if ( !! specs) {
           $overview.html('<div class="bullet_spec"></div>');
           jQuery.each(specs, function () {
               $overview.children('div').append('<ul class="specs"><li class="label">' + this.k + ' : ' + this.v + '</li></ul>');
           });
       } else { // leave blank?? not sure what to do here
       }
   });