循环div在内联位置

Question

我在下面使用这段代码使用javascript创建div循环。在循环所需的div时效果很好。但是问题是div的对齐方式。它处于备用位置。我要在这里完成的工作是使我的设计div对齐。

预期产量

  

第一部|第二分区<<-第一循环

     

第一个DIv |第二师<<-第二循环

代码中的当前设计

  

|第一个DIv

     

第一师|

function isOdd(n) {
  var IsOdd = false;
  if (Math.abs(n % 2) == 1) {
    IsOdd = true;
  }
  return IsOdd;
}


$("#click").click(function(e) {
  e.preventDefault();
  var odd = [1, 3, 5, 7, 9];
  var even = [2, 4, 6, 8, 10];
  var counter = 0;
  var FireCounter = [1, 2, 3]
  for (var i = 0; i < FireCounter.length; i++) {
    var ArchPlanDetails = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).find(".req");
    var cardTitle = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).parent().find(".card-title")[0]; //.innerText;
    console.log(cardTitle);
    var dividedAlertPlanDetails = FireCounter.length / 2;
    var mainCard = "";
    mainCard = '<div class="row">' +
      '<div class="col-md-6" id="divBody_' + i + '">' +
      '</div>' +
      '<div class="col-md-6" id="divBody2_' + i + '">' +
      '</div>' +
      '</div>';
    $("#modalAlert .modal-body").append(mainCard);
    var fieldSet = '<fieldset class="border p-2 mt-2">' +
      '<legend style="color:black !important; font-size:30px !important">' + cardTitle + '</legend>' +
      '<div id="fieldDivID' + i + '"></div>' +
      '<fieldset>';
    //var cards = '<div class="card" id="HelloWorld_' + i + '"> <div class="card-header bg-success"><h3 class="card-title">' + cardTitle + ' </h3 ></div> <div class="card-body"> </div>'
    if (isOdd(i)) {
      $("#modalAlert .modal-body #divBody_" + i).append(fieldSet);
    } else {
      $("#modalAlert .modal-body #divBody2_" + i).append(fieldSet);
    }
    counter++;
    $.each(ArchPlanDetails, function(Index, Value) {
      var appendBody = "";
      var id = "#fieldDivID" + i;
      var divID = "#divBody_" + i;
      var divID2 = "#divBody2_" + i;
      var textboxValue = $(Value).find("input[type=text],[type=number]").val();
      var InnerText = Value.innerText.trim();

      appendBody = '<div class="row mt-2" style="font-size:20px">' +
        '<div class="col-md-12"> ' + InnerText + ' </div >' +
        '</div >';

      if (textboxValue == "") {
        if (isOdd(i)) {
          $(divID + " " + id).append(appendBody);
        } else {
          $(divID2 + " " + id).append(appendBody);
        }
      }
    });
  }


  $("#modalAlert .modal-header").html("Header");
  $("#modalAlert").modal("show");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<form id="frmPlanDetails">
  <div class="col-md-12 divHide" id="dvFireCounter1">
    <div id="card_one" class="card">
      <div class="card-header bg-success pt-0 pb-0">
        <h3 class="card-title pt-1">
          <span id="FireCounter1"></span> Plan A
          <a class="fa fa-window-minimize float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a>
          <a class="custom-control custom-checkbox float-right">
            <input type="checkbox" class="custom-control-input" id="Fire" name="FireIsComplied" value="true">
            <label class="custom-control-label font-weight-normal" for="Fire">
                        Complied
                    </label> &nbsp;&nbsp;
          </a>
        </h3>
      </div>
      <div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion">
        <fieldset class="border p-2">
          <div class="row">
            <div class="col-md-6 req">
              Ave. Cover(mm)
              <input type="text" class="form-control flat" name="FireAveCover" id="" placeholder="25">
            </div>
            <div class="col-md-6 req">
              Overall Depth(mm)
              <input type="text" class="form-control flat" name="FireOverAll" id="" placeholder="150">
            </div>
          </div>
        </fieldset>
      </div>
    </div>
  </div>


  <div class="col-md-12 divHide" id="dvFireCounter2">
    <div id="card_one" class="card">
      <div class="card-header bg-success pt-0 pb-0">
        <h3 class="card-title pt-1">
          <span id="FireCounter2"></span> Plan B
          <a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a>
          <a class="custom-control custom-checkbox float-right">
            <input type="checkbox" class="custom-control-input" id="BP" name="BPIsComplied" value="true">
            <label class="custom-control-label font-weight-normal" for="BP">
                        Complied
                    </label> &nbsp;&nbsp;
          </a>
        </h3>
      </div>
      <div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
        B
      </div>
    </div>
  </div>



  <div class="col-md-12 divHide" id="dvFireCounter3">
    <div id="card_one" class="card">
      <div class="card-header bg-success pt-0 pb-0">
        <h3 class="card-title pt-1">
          <span id="FireCounter3"></span> Plan C
          <a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a>
          <a class="custom-control custom-checkbox float-right">
            <input type="checkbox" class="custom-control-input" id="AS" name="ASIsComplied" value="true">
            <label class="custom-control-label font-weight-normal" for="AS">
                        Complied
                    </label> &nbsp;&nbsp;
          </a>
        </h3>
      </div>
      <div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
        C
      </div>
    </div>
  </div>

  <button id="click">Click</button>
</form>



<div class="modal fade" id="modalAlert" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header bg-success">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        <div class="row">

        </div>
      </div>
      <!-- Modal footer -->
    </div>
  </div>
</div>

jsFiddle