title: Using java, json, ajax and html to display image/name pairs in a row - currently displays in a column
body: <p>I am trying to display some images with their names below them using json. I want the image/name pairs to be next to each other. At the moment they are one under the other.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;form data-toggle="validator" role="form" id="selectForm"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;div class="form-select"&gt;
                      &lt;!-- Place for Captcha image --&gt;
                      &lt;div class="input-group" id="img-container"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt; &lt;!-- /row --&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>ajax:</p>
  
  <pre><code>.done(function(responseJson1a) {
      dataType: "json";
      //Remove existing images
      $("#img-container").find("img").remove();
  
      // JSON response to populate the image
      $(responseJson1a).appendTo($("#img-container"));
  
      for (i = 0; i &lt; responseJson1a.length; i++) {
          $(responseJson1a[i]).appendTo($("#img-container"));
      }
  });
  </code></pre>
  
  <p>java:</p>
  
  <pre><code>        String json = null;
          int i = 0;
          for (final YouthMember youthMember : youthMembers) {
              String image = youthMember.getPhotograph();
              String name = youthMember.getFirstname();
              if (i == 0){
                  json = "&lt;div class='input-group'&gt; &lt;img src=" + image + " width='60' alt='captcha image' &gt; " + 
                          "&lt;h3 class='form-line-heading'&gt;" + name + "&lt;/h3&gt; &lt;/div&gt;";
                  i++;
              }else{
                  json = json + ("&lt;img src=" + image + " width='60' alt='captcha image' &gt;" +
                          "&lt;h3 class='form-line-heading'&gt;" + name + "&lt;/h3&gt; &lt;/div&gt;");
              }
          }
  </code></pre>
  
  <p>I have tried placing the "" at the end encapsulating all the images; however, that does not work (image/string pairs are still in a single column.</p>
  
  <p>When I remove the names "" + name + "" and the opening "" the images are one after the other in a row until the row is filled and then start a new row. This is what I want except with the names under each image.</p>
  
  <p>Changed to (including style='display:inline;') - now images and names are all inline. Want name under image:</p>
  
  <pre><code>for (final YouthMember youthMember : youthMembers) {
              String image = youthMember.getPhotograph();
              String name = youthMember.getFirstname();
              if (i == 0){
                  json = "&lt;div class='input-group'&gt; &lt;img src=" + image + " width='60' alt='captcha image' &gt; " + 
                          "&lt;h4 class='form-line-heading' style='display:inline;'&gt;" + name + "&lt;/h4&gt;";
                  i++;
              }else{
                  json = json + ("&lt;img src=" + image + " width='60' alt='captcha image' &gt;" +
                          "&lt;h4 class='form-line-heading' style='display:inline;'&gt;" + name + "&lt;/h4&gt;");
              }
          }
          json = json + "&lt;/div&gt;";
  </code></pre>
  
  <p>This change has mostly worked (issue with 19th image):</p>
  
  <pre><code>    String json = null;
      int i = 0;
      for (final YouthMember youthMember : youthMembers) {
          String image = youthMember.getPhotograph();
          String name = youthMember.getFirstname();
          if (i == 0){
              json = "&lt;div class='col-md-2'&gt; &lt;img src=" + image + " width='60' alt='captcha image' &gt; " + 
                      "&lt;h4 class='form-line-heading'&gt;" + name + "&lt;/h4&gt;&lt;/div&gt;";
              i++;
          }else{
              json = json + ("&lt;div class='col-md-2'&gt; &lt;img src=" + image + " width='60' alt='captcha image' &gt;" +
                      "&lt;h4 class='form-line-heading'&gt;" + name + "&lt;/h4&gt;&lt;/div&gt;");
          }
      }
      response.setContentType("image/jpeg");
      response.setCharacterEncoding("UTF-8");
      response.getWriter().write(json);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/kX9EJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kX9EJ.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/weC3j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/weC3j.png" alt="enter image description here"></a></p>