JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="content">
    <div id="mobile"></div>
  </div>
</body>

JavaScript

//solution 1 set smartphones as global
var smartphones = [];

$(function() {

  function loadSmartphones() {
    $.getJSON("js/smartphone.json")
      .done(function(data) { //parameter
        smartphones = data.smartphones;
        renderSmartphones();
        //or pass smartphones as parameter
        //renderSmartphones(smartphones);
      }).fail(function() {
        $("#mobile").html("Sorry, this page could not be loaded!"); //falback in case the json could not load
      });
  }
  loadSmartphones();

});
// pass argment smartphones ------|
function renderSmartphones( /*smartphones*/ ) {
  var newContent = "";

  for (var i = 0; i < smartphones.length; i++) {
    newContent += "<div class='col-lg-4 col-md-4 col-sm-6 col-xs-12 item'>";
    newContent += "<div class='box'>";
    newContent += "<div class='brand'>" + smartphones[i].brand + "</div>";
    newContent += "<div class='description'>";
    newContent += "<div class='serie '>" + smartphones[i].serie + "</div>";
    newContent += "<div class='memory'>" + smartphones[i].memory + "</div>";
    newContent += "<div class='rom'>" + smartphones[i].rom + "</div>";
    newContent += "</div>";
    newContent += "<div class='price'>" + smartphones[i].price + "</div>";
    newContent += "<button class='add-to-cart' type='button'>" + "add item to the cart" + "</button>";
    newContent += "</div>";
    newContent += "</div>";
  }
  $("#mobile").html(newContent);
}