单击按钮创建div

Question

我希望点击一个包含表单的按钮来创建一个div。每个div（表单）包含有关一个平面的信息。当我单击保存按钮时，每个平面都会保存在数据库中。我已经开始意识到表单，但我不知道如何通过单击按钮添加这些div。我曾尝试使用$( ".div_avion" ).clone().appendTo( "#div_flotte" );，但它会将div（不添加）相乘。

这是我的代码的开头：

<div id="flotte" class="tab-pane fade">
    <h3>Gestion de la flotte</h3><hr>
    <form action="<?php echo $CurrentURL;?>" method="POST">
    <div class="panel panel-default">
      <div class="panel-body">
        <a class="btn btn-default btn-lg" href="http://<?php echo $_SERVER[HTTP_HOST];?>/administration/hubs/gerer"><i class="fa fa-arrow-left"></i> Retour</a>
        <button type="submit" class="btn btn-success btn-lg" name="button" value="saveflotte"><i class="fa fa-floppy-o"></i> Enregistrer</button>
      </div>
    </div>
    <button onclick="AddAvion()" class="btn btn-success" type="button"><i class="fa fa-plus"></i> Ajouter un appareil</button><hr>
    <div id="div_flotte">
    <div class="div_avion" style="width:300px;float:left;position:relative;margin: 5px 5px 5px 5px;">
        <div class="panel panel-default">
              <div class="panel-heading">
              <div class="form-inline">
              <div class="input-group" style="width:200px">
                  <span class="input-group-addon" id="basic-addon1">F-BEN</span>
                  <input type="text" name="avions[][immat]" class="form-control" placeholder="Ex : 49" >
              </div>
              <div class="input-group" style="float:right;">
                  <button class="btn btn-danger" name="button"><i class="fa fa-trash"></i></button>
              </div>
              </div>
              </div>
          <div class="panel-body">
          <div class="form-group">
            <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1">Marque</span>
                  <input type="text" name="avions[][marque]" class="form-control" placeholder="Ex : Airbus" >
              </div>
             </div>
             <div class="form-group">
              <div class="input-group">
                 <span class="input-group-addon" id="basic-addon1">Modèle</span>
                 <input type="text" name="avions[][modele]" class="form-control" placeholder="Ex : 737" >
              </div>
             </div>
             <div class="form-group">
            <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1">IATA</span>
                  <input type="text" name="avions[][iata]" class="form-control" placeholder="Ex : 738" >
              </div>
             </div>
             <div class="form-group">
            <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1">Type de vol</span>
                  <select name="avions[][type]" class="form-control-inline">
                    <?php
                      foreach ($types_vol_avion as $cle => $value) {
                            echo '<option value="'.$cle.'">'.$value.'</option>';
                        }
                      ?>
                </select>
              </div>
             </div>
             <div class="form-group">
            <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1">Transport</span>
                  <select name="avions[][activite]" class="form-control-inline">
                    <?php
                      foreach ($Activite_avion as $cle => $value) {
                            echo '<option value="'.$cle.'">'.$value.'</option>';
                        }
                      ?>
                </select>
              </div>
             </div>
          </div>
        </div>
    </div>
    </div>
    </form>
    <script>
    function AddAvion()
    {
        $( ".div_avion" ).clone().appendTo( "#div_flotte" );
    }
    </script>
</div>

你有什么想法吗？