Insert new fields dynamically, one next to the other

Question

Hello, I need to clear up the following question. I have a web application, made in Asp.Net, in a new functionality I have 6 fixed fields containing a combo, a space for viewing the photo and an input and if the customer wants to add another field, it can click the Add Photo button and a new field containing the same items will be inserted. So far so good, this is working perfectly (in the matter of automatic filling of combos, input and visualization of photos. But when adding a new field, it should insert the fields next to each other, but ends up inserting one underneath the other (as shown). The section that I insert the fields dynamically is down here:

var contadorID = 6;
var contador = 0;

  $("#btnAdicionaFoto").click(function (ev) {
            AdicionarCampo();
   });
        
function AdicionaCampo(){
var html = "";    
    html += "<div class='Moldura'>";
    html += "<select class='form - control' id='cboTipoFoto" + contadorID + "' style='width: 480px;'>";
    html += " </select>";
    html += " <div class='Moldura2'>";
    html += " <img id='img" + contadorID + "' style = 'width: 480px; height: 360px' /> ";
    html += " </div>";
    html += " <input id='btnUpload" + contadorID + "' type = 'file' accept = 'image / ' class='btn btn - info' /> ";
    html += "</div>";        

    if (contador <4)
        $("#adicaoinput1").append(html);
    else if (contador < 7)
        $("#adicaoinput2").append(html);
}

<div class="row" style="padding-left: 10px!important;">
        <div class="Moldura">
            <select class="form-control" id="cboTipoFoto3">
            </select>
            <div class="Moldura2">
                <img id="img3" style="width: 480px; height: 360px" />
            </div>
            <input id="btnUpload3" type="file" accept="image/" class="btn btn-info" />
        </div>
        <div class="Moldura">
            <select class="form-control" id="cboTipoFoto4">
            </select>
            <div class="Moldura2">
                <img id="img4" style="width: 480px; height: 360px" />
            </div>
            <input id="btnUpload4" type="file" accept="image/" class="btn btn-info" />
        </div>
        <div class="Moldura">
            <select class="form-control" id="cboTipoFoto5">
            </select>
            <div class="Moldura2">
                <img id="img5" style="width: 480px; height: 360px" />
            </div>
            <input id="btnUpload5" type="file" accept="image/" class="btn btn-info" />
        </div>
    </div>
    <div class="row" style="padding-left: 10px!important;">
        <div id="adicaoinput1" >
        </div>
    </div>
    <div class="row" style="padding-left: 10px!important;">
        <div id="adicaoinput2" >
        </div>
    </div>
     <div>
        <button type="button" id="btnAdicionaFoto" class="btn btn-info">ADICIONAR FOTOS</button>
    </div>

Instead of staying this way (like the image below)

It’s getting this way:

How do I fix it?

Answer 1

It’s because you’re not inserting inside a div.row. The class .row will group Divs next to each other, as with Divs within the first div.row that you put.

You can resolve by placing the id’s on div.row and remove the daughters Ivs:

<div id="adicaoinput1" class="row" style="padding-left: 10px!important;">
</div>
<div id="adicaoinput2" class="row" style="padding-left: 10px!important;">
</div>

Example:

var contadorID = 6;
var contador = 0;

  $("#btnAdicionaFoto").click(function (ev) {
            AdicionarCampo();
   });
        
function AdicionarCampo(){
var html = "";    
    html += "<div class='Moldura'>";
    html += "<select class='form - control' id='cboTipoFoto" + contadorID + "' style='width: 480px;'>";
    html += " </select>";
    html += " <div class='Moldura2'>";
    html += " <img id='img" + contadorID + "' style = 'width: 480px; height: 360px' /> ";
    html += " </div>";
    html += " <input id='btnUpload" + contadorID + "' type = 'file' accept = 'image / ' class='btn btn - info' /> ";
    html += "</div>";        

    if (contador <4)
        $("#adicaoinput1").append(html);
    else if (contador < 7)
        $("#adicaoinput2").append(html);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="row" style="padding-left: 10px!important;">
  <div class="Moldura">
      <select class="form-control" id="cboTipoFoto3">
      </select>
      <div class="Moldura2">
          <img id="img3" style="width: 480px; height: 360px" />
      </div>
      <input id="btnUpload3" type="file" accept="image/" class="btn btn-info" />
  </div>
  <div class="Moldura">
      <select class="form-control" id="cboTipoFoto4">
      </select>
      <div class="Moldura2">
          <img id="img4" style="width: 480px; height: 360px" />
      </div>
      <input id="btnUpload4" type="file" accept="image/" class="btn btn-info" />
  </div>
  <div class="Moldura">
      <select class="form-control" id="cboTipoFoto5">
      </select>
      <div class="Moldura2">
          <img id="img5" style="width: 480px; height: 360px" />
      </div>
      <input id="btnUpload5" type="file" accept="image/" class="btn btn-info" />
  </div>
</div>
 <div id="adicaoinput1" class="row" style="padding-left: 10px!important;">
 </div>
 <div id="adicaoinput2" class="row" style="padding-left: 10px!important;">
 </div>
  <div>
     <button type="button" id="btnAdicionaFoto" class="btn btn-info">ADICIONAR FOTOS</button>
 </div>