jqueryを使用してdivを動的に追加するときに

Question

を動的に追加すると正しくないフォームフィールドを動的に追加するときにWebページに機能を追加するようにしていますが、フォームは、ここでは行単位のフィールドと私は移動+ボタン右の端を持って、任意の提案を行い、私が間違ってどこかのコードで

$('#clone_button').click(function() { 
 
    $('#clone_wrapper') 
 
    .clone() 
 
    .append('clone') 
 
    .appendTo($('#clone_wrapper')); 
 
});

<link href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/preload.min.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/plugins.min.css"> 
 
    <link rel="stylesheet" href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/style.light-blue-500.min.css"> 
 
    <script src="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/js/plugins.min.js"></script> 
 
    <script src="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/js/app.min.js"></script> 
 
<div id="ms-preload" class="ms-preload"> 
 
     <div id="status"> 
 
     <div class="spinner"> 
 
      <div class="dot1"></div> 
 
      <div class="dot2"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="bg-full-page bg-primary back-fixed"> 
 
     <div class="md-500 absolute-center"> 
 
\t 
 
\t <div class="col-lg-10 col-md-offset-1"> 
 
     <div class="card"> 
 
      <div class="card-block"> 
 
\t \t <<h1 class="color-primary text-big">Let's Add User</h1> 
 
      <div class="col-md-2"> 
 
\t \t \t <div class="row "> 
 
\t \t \t \t \t \t <button class="btn btn-raised btn-primary btn-block " id="clone_button"> 
 
         + <i class="zmdi zmdi-account"></i></button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t   <form> 
 
       <fieldset> 
 
\t \t \t <div id="clone_wrapper"> 
 
\t \t \t <div class="col-md-3 form-line"> 
 
       
 
\t \t \t \t <div class="form-group"> 
 
         <label for="select111" class="col-md-2 control-label">Role</label> 
 
         <div class="col-md-10"> 
 
          <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
 
          <option>Ea nam qui vel consequatur</option> 
 
          <option>Dolorem perspiciatis adipisci </option> 
 
          <option>Aperiam, debitis deleniti</option> 
 
          <option>Accusamus non qui amet eum</option> 
 
          <option>Doloremque commodi impedit</option> 
 
          </select> 
 
         </div> 
 
         </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-md-2 form-line"> 
 
       <div class="form-group label-floating"> 
 
        <div class="input-group"> 
 
        
 
        <label class="control-label" for="ms-form-user">First Name</label> 
 
        <input type="text" id="ms-form-user" class="form-control"> </div> 
 
       </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-md-2 form-line"> 
 
\t \t \t \t <div class="form-group label-floating"> 
 
        <div class="input-group"> 
 
        
 
        <label class="control-label" for="ms-form-pass">Last Name</label> 
 
        <input type="password" id="ms-form-pass" class="form-control"> </div> 
 
       </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-2 form-line"> 
 
\t \t \t \t <div class="form-group label-floating"> 
 
        <div class="input-group"> 
 
        
 
        <label class="control-label" for="ms-form-pass">Email</label> 
 
        <input type="password" id="ms-form-pass" class="form-control"> </div> 
 
       </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-md-2 form-line"> 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
         <label for="select111" class="col-md-2 control-label">Profile</label> 
 
         <div class="col-md-2"> 
 
          <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
 
          <option>Ea nam qui vel consequatur</option> 
 
          <option>Dolorem perspiciatis adipisci </option> 
 
          <option>Aperiam, debitis deleniti</option> 
 
          <option>Accusamus non qui amet eum</option> 
 
          <option>Doloremque commodi impedit</option> 
 
          </select> 
 
         </div> 
 
         </div> 
 
       </div> \t 
 
</div> \t \t \t \t  
 

 
\t \t \t 
 
\t \t <div class="col-md-4"> 
 
       <div class="row "> 
 
        <div class="col-md-5 form-line"> 
 
\t \t \t \t <button class="btn btn-raised btn-block">back</button> 
 
        </div> 
 
        <div class="col-md-5 form-line"> 
 
        <button class="btn btn-raised btn-primary btn-block">Done</button> 
 
        </div> 
 
       </div> \t 
 
</div> 
 
\t \t \t 
 
       </fieldset> 
 
      </form> 
 
      </div> 
 
     </div> 
 
\t \t </div> 
 
\t \t 
 
     </div>

<div id="ms-preload" class="ms-preload"> 
     <div id="status"> 
     <div class="spinner"> 
      <div class="dot1"></div> 
      <div class="dot2"></div> 
     </div> 
     </div> 
    </div> 
    <div class="bg-full-page bg-primary back-fixed"> 
     <div class="md-500 absolute-center"> 

     <div class="col-lg-10 col-md-offset-1"> 
     <div class="card"> 
      <div class="card-block"> 
      <<h1 class="color-primary text-big">Let's Add User</h1> 
      <div class="col-md-2"> 
       <div class="row "> 
          <button class="btn btn-raised btn-primary btn-block " id="clone_button"> 
         + <i class="zmdi zmdi-account"></i></button> 
        </div> 
        </div> 
        <form> 
       <fieldset> 
       <div id="clone_wrapper"> 
       <div class="col-md-3 form-line"> 

        <div class="form-group"> 
         <label for="select111" class="col-md-2 control-label">Role</label> 
         <div class="col-md-10"> 
          <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
          <option>Ea nam qui vel consequatur</option> 
          <option>Dolorem perspiciatis adipisci </option> 
          <option>Aperiam, debitis deleniti</option> 
          <option>Accusamus non qui amet eum</option> 
          <option>Doloremque commodi impedit</option> 
          </select> 
         </div> 
         </div> 
       </div> 

       <div class="col-md-2 form-line"> 
       <div class="form-group label-floating"> 
        <div class="input-group"> 

        <label class="control-label" for="ms-form-user">First Name</label> 
        <input type="text" id="ms-form-user" class="form-control"> </div> 
       </div> 
       </div> 

       <div class="col-md-2 form-line"> 
       <div class="form-group label-floating"> 
        <div class="input-group"> 

        <label class="control-label" for="ms-form-pass">Last Name</label> 
        <input type="password" id="ms-form-pass" class="form-control"> </div> 
       </div> 
       </div> 
       <div class="col-md-2 form-line"> 
       <div class="form-group label-floating"> 
        <div class="input-group"> 

        <label class="control-label" for="ms-form-pass">Email</label> 
        <input type="password" id="ms-form-pass" class="form-control"> </div> 
       </div> 
       </div> 

       <div class="col-md-2 form-line"> 

        <div class="form-group"> 
         <label for="select111" class="col-md-2 control-label">Profile</label> 
         <div class="col-md-2"> 
          <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
          <option>Ea nam qui vel consequatur</option> 
          <option>Dolorem perspiciatis adipisci </option> 
          <option>Aperiam, debitis deleniti</option> 
          <option>Accusamus non qui amet eum</option> 
          <option>Doloremque commodi impedit</option> 
          </select> 
         </div> 
         </div> 
       </div> 
</div>     


      <div class="col-md-4"> 
       <div class="row "> 
        <div class="col-md-5 form-line"> 
        <button class="btn btn-raised btn-block">back</button> 
        </div> 
        <div class="col-md-5 form-line"> 
        <button class="btn btn-raised btn-primary btn-block">Done</button> 
        </div> 
       </div> 
</div> 

       </fieldset> 
      </form> 
      </div> 
     </div> 
     </div> 

     </div> 

Answer 1

だ場合は、すべての上に新しいフォームを追加する必要がありますボタンcあなたは新しく形成された要素（form）全体をクローンしています。

form-groupが新しく作成されるたびにfieldsetに追加されたコードを参照してください。また、新規のform-groupにはすべてrowクラスが適用されています。

var clones = 1; 
 
$('#clone_button').click(function() { 
 
    $('#clone_wrapper') 
 
    .clone() 
 
    .append('clone').attr('id', '#clone_wrapper' + clones++) 
 
    .appendTo($('.form-set')); 
 
});

.form-set #clone_wrapper{ 
 
    display: block; 
 
}

<link href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/preload.min.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/plugins.min.css"> 
 
<link rel="stylesheet" href="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/css/style.light-blue-500.min.css"> 
 
<script src="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/js/plugins.min.js"></script> 
 
<script src="https://s3.ap-south-1.amazonaws.com/testbucket092601/material-style-1.5.2/HTML/assets/js/app.min.js"></script> 
 
<div id="ms-preload" class="ms-preload"> 
 
    <div id="status"> 
 
    <div class="spinner"> 
 
     <div class="dot1"></div> 
 
     <div class="dot2"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="bg-full-page bg-primary back-fixed"> 
 
    <div class="md-500 absolute-center"> 
 

 
    <div class="col-lg-10 col-md-offset-1"> 
 
     <div class="card"> 
 
     <div class="card-block"> 
 
      <<h1 class="color-primary text-big">Let's Add User</h1> 
 
      <div class="col-md-2"> 
 
       <div class="row "> 
 
       <button class="btn btn-raised btn-primary btn-block " id="clone_button"> 
 
         + <i class="zmdi zmdi-account"></i></button> 
 
       </div> 
 
      </div> 
 
      <form> 
 
       <fieldset class="form-set"> 
 
       <div id="clone_wrapper" class="row"> 
 
        <div class="col-md-3 form-line"> 
 

 
        <div class="form-group"> 
 
         <label for="select111" class="col-md-2 control-label">Role</label> 
 
         <div class="col-md-10"> 
 
         <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
 
          <option>Ea nam qui vel consequatur</option> 
 
          <option>Dolorem perspiciatis adipisci </option> 
 
          <option>Aperiam, debitis deleniti</option> 
 
          <option>Accusamus non qui amet eum</option> 
 
          <option>Doloremque commodi impedit</option> 
 
          </select> 
 
         </div> 
 
        </div> 
 
        </div> 
 

 
        <div class="col-md-2 form-line"> 
 
        <div class="form-group label-floating"> 
 
         <div class="input-group"> 
 

 
         <label class="control-label" for="ms-form-user">First Name</label> 
 
         <input type="text" id="ms-form-user" class="form-control"> </div> 
 
        </div> 
 
        </div> 
 

 
        <div class="col-md-2 form-line"> 
 
        <div class="form-group label-floating"> 
 
         <div class="input-group"> 
 

 
         <label class="control-label" for="ms-form-pass">Last Name</label> 
 
         <input type="password" id="ms-form-pass" class="form-control"> </div> 
 
        </div> 
 
        </div> 
 
        <div class="col-md-2 form-line"> 
 
        <div class="form-group label-floating"> 
 
         <div class="input-group"> 
 

 
         <label class="control-label" for="ms-form-pass">Email</label> 
 
         <input type="password" id="ms-form-pass" class="form-control"> </div> 
 
        </div> 
 
        </div> 
 

 
        <div class="col-md-2 form-line"> 
 

 
        <div class="form-group"> 
 
         <label for="select111" class="col-md-2 control-label">Profile</label> 
 
         <div class="col-md-2"> 
 
         <select id="select111" class="form-control selectpicker" data-dropup-auto="false"> 
 
          <option>Ea nam qui vel consequatur</option> 
 
          <option>Dolorem perspiciatis adipisci </option> 
 
          <option>Aperiam, debitis deleniti</option> 
 
          <option>Accusamus non qui amet eum</option> 
 
          <option>Doloremque commodi impedit</option> 
 
          </select> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </fieldset> 
 
       <div class="row "> 
 
        <div class="col-md-6"></div> 
 
        <div class="col-md-3 form-line"> 
 
         <button class="btn btn-raised btn-block">back</button> 
 
        </div> 
 
        <div class="col-md-3 form-line"> 
 
         <button class="btn btn-raised btn-primary btn-block">Done</button> 
 
        </div> 
 
        </div> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div>