Append HTML to row if condition true, make sure there's still 3 columns to a row

I want to add the HTML of a column into a row, and have 3 columns per row. I do not wish to display all of the images in my array, and if they are not supposed to be displayed, I do not wish for the column number to tick over.

This should be really easy, but I'm getting really confused. My current code is just giving me an infinite loop getting stuck on an image where it is not supposed to display.

function loadImages()
  {
    var data = <?php echo json_encode($data); ?>;

    data = $.map(data, function(value, index) {
      return [value];
    });

    console.log(data);

    for(var i = 0; i < data.length; i++)
    {
      data[i] = $.map(data[i], function(value, index) {
        return [value];
      });
    }

    var div = document.getElementById('imageBox');

    var img = 0;

    var row = 0;

    while(img < data.length)
    {
        div.innerHTML += '<div class="row gallery-row" id="row' + row + '"></div>';

        var col = 0;
        while(SOMETHING OR OTHER)
        {
          if(!!data[img])
          {
            var html = [
            '<div class="col-sm-4">',
            '    <a data-toggle="modal" data-target="#imageModal" onclick="" href="#"  id=a' + img + '>',
            '        <img class="img-responsive img-gallery" src="" id=img' + img + '>',
            '    </a>',
            '</div>'
            ].join('');

            var valid = data[img][1][4].split(": ")[1];

            if(valid == "True")
            {
              var imgName = data[img][0];

              var name = data[img][1][0];
              var location = data[img][1][1];
              var desc = data[img][1][2];

              document.getElementById('row'+ String(row)).innerHTML += html;
              document.getElementById('img' + String(img)).setAttribute('src', imgName);
              document.getElementById('a' + String(img)).setAttribute('onclick', "javascript:loadModalImage('" + imgName + "', '" + name + "', '" + location + "', '" + desc + "')");
              col++;
            }

            img++;
          }
        }

        row++;
      }
  }

  function loadImageData(imageName, imageLocation, imageDesc)
  {
    var imgName = document.getElementById('img-name');
    var imgDesc = document.getElementById('img-desc');

    imgName.innerHTML = "Taken by <b>" + imageName + "</b> at <b>" + imageLocation + "</b>.<br>";
    imgDesc.innerHTML = imageDesc;
  }

  function loadModalImage(image, imageName, imageLocation, imageDesc)
  {
    var modalImage = document.getElementById('imageModalImage');
    modalImage.setAttribute("src", image);

    loadImageData(imageName, imageLocation, imageDesc);
  }

And the HTML:

<div class="box" name="box" id="imageBox">
      <!-- Modal -->
      <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-img">
          <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
              </button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
              <img class="img-responsive imageModalImage" id="imageModalImage" src="">

              <p id="img-name"></p>
              <p id="img-desc"></p>
            </div>
            <!-- Modal Footer -->
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>

As I said, I'm sure this should be an easy fix. Any help is still greatly appreciated, as I've just completely confused myself trying to solve this.