"Untitled"
Bootstrap 4.1.1 Snippet by muzikiii

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-12"> <h2>Story</h2> <div class="alert alert-secondary" role="alert"> A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="card"> <div class="card-body"> This is some text within a card body. </div> </div> <br> <nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3"> <a class="navbar-brand" href="#">Data</a> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#scrollspyTopic1">Topic 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyTopic2">Topic 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyTopic3">Topic 3</a> </li> </ul> </nav> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <B> Common </B> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <div class="form-row"> <div class="col-md-4 mb-3"> <label for="validationServer013">Name *</label> <input type="text" class="form-control" id="validationServer013" placeholder="name" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer013">Tax No</label> <input type="text" class="form-control" id="validationServer013" placeholder="tax_no" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer013">Tax Name</label> <input type="text" class="form-control" id="validationServer013" placeholder="tax_name" required> </div> </div> <div class="form-row"> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Type</label> <div class="form-check"> <div class="radio"><label><input type="radio" name="gender" value="male" required="true">AAA</label></div> <div class="radio"><label><input type="radio" name="gender" value="female" required="true">BBB</label></div> </div> </div> </div> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Orgazation Type</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status" name="statusradio" value="Female" checked>Government </label> <label class="radio-inline"> <input type="radio" id="status" name="statusradio" value="Male">Organization </label> </div> </div> </div> </div> <!-- Country ----> <div class="form-row"> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="Country">Country</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="country" required="true" name="country" disabled> <option selected value="THA">THA</option> <option value="LAO">LAO</option> <option value="OTH">OTHER</option> </select> </div> </div> </div> <!-- address ----> <div class="form-row"> <div class="col-md-8 mb-3"> <label for="validationServer013">Address *</label> <input type="text" class="form-control" id="validationServer013" placeholder="address_th" required> </div> </div> <!-- address ----> <div class="form-row"> <div class="col-md-4 mb-3"> <label for="validationServer013">Place</label> <input type="text" class="form-control" id="validationServer013" placeholder="" required> </div> <div class="col-md-2mb-3"> <label for="validationServer013">No</label> <input type="text" class="form-control" id="validationServer013" placeholder="" required> </div> <div class="col-md-2 mb-3"> <label for="validationServer013">Building</label> <input type="text" class="form-control" id="validationServer013" placeholder="" required> </div> <div class="col-md-1 mb-3"> <label for="validationServer013">Floor</label> <input type="text" class="form-control" id="validationServer013" placeholder="" required> </div> <div class="col-md-1 mb-3"> <label for="validationServer013">Room</label> <input type="text" class="form-control" id="validationServer013" placeholder="" required> </div> </div> </div> </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading" id="scrollspyTopic1"> <B> Topoic 1 </B> </div> <div class="panel-body"> <div class="row"> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Common Data</h3> <h6 class="card-subtitle mb-2 text-muted">Common Data</h6> <div class="form-row"> <div class="col-md-2 mb-4"> <label for="validationServer013">Code *</label> <input type="text" class="form-control" id="validationServer013" placeholder="name" required> </div> <div class="col-md-1 mb-4"></div> <div class="col-md-3 mb-4"> <div class="form-group"> <label class="control-label" for="date">Status</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="true" checked>มีสิทธิ์ </label> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="false">ไม่มีสิทธิ์ </label> </div> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <!-- Form code begins --> <form method="post"> <div class="form-group"> <!-- Date input --> <label for="validationServer013">Medicare Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" disabled /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> <!-- Form code ends --> </div> </div> </div> <div class="form-row"> <div class="col-md-3 mb-4"> <div class="form-group"> <label class="control-label" for="date">Status 1</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status1" name="statusradio2" value="Female" checked>มีสิทธิ์ </label> <label class="radio-inline"> <input type="radio" id="status1" name="statusradio2" value="Male">ไม่มีสิทธิ์ </label> </div> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <!-- Form code begins --> <form method="post"> <div class="form-group"> <!-- Date input --> <label for="validationServer013">Effective Date</label> <!-- <label for="dtpickerdemo" class="col-sm-4 control-label">Medicare Date</label>--> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> <!-- Form code ends --> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Expire Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Start Date 1</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> </div> <div class="form-row"> <div class="col-md-3 mb-4"> <div class="form-group"> <label class="control-label" for="date">Status 2</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status2" name="statusradio3" value="Female" checked>มีสิทธิ์ </label> <label class="radio-inline"> <input type="radio" id="status2" name="statusradio3" value="Male">ไม่มีสิทธิ์ </label> </div> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <!-- Form code begins --> <form method="post"> <div class="form-group"> <!-- Date input --> <label for="validationServer013">Effective Date</label> <!-- <label for="dtpickerdemo" class="col-sm-4 control-label">Medicare Date</label>--> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> <!-- Form code ends --> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <!-- Form code begins --> <form method="post"> <div class="form-group"> <!-- Date input --> <label for="validationServer013">Expire Date</label> <!-- <label for="dtpickerdemo" class="col-sm-4 control-label">Medicare Date</label>--> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> <!-- Form code ends --> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Start Date 2</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Contact</h3> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Access</h3> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <div class="form-row"> <div class="col-md-3 mb-3"> <div class="form-group"> <label class="control-label" for="PayType">Type</label> </div> </div> <div class="col-md-2 mb-3"> <label for="validationServer013">Username</label> <input type="text" class="form-control" id="validationServer013" required> </div> <div class="col-md-2 mb-3"> <label for="validationServer013">Password</label> <input type="password" class="form-control" id="validationServer013" required> </div> <div class="col-md-4 mb-3"> <div class="form-group"> <!-- Date input --> <label for="validationServer013">Effective Date</label> <!-- <label for="dtpickerdemo" class="col-sm-4 control-label">Medicare Date</label>--> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <!-- Row 2 --> <div class="form-row"> <div class="col-md-3 mb-3"> <div class="form-group"> <label class="control-label" for="PayType">File</label> </div> </div> <div class="col-md-2 mb-3"> </div> <div class="col-md-2 mb-3"> <label for="validationServer013">Password</label> <input type="password" class="form-control" id="validationServer013" required> </div> <div class="col-md-4 mb-3"> </div> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Finance</h3> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <div class="form-group"> <label class="control-label" for="PayType">Type</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="PayType" required="true" name="PayType"> <option selected>NONE</option> <option value="AF">Transfer</option> <option value="AX">Cash</option> <option value="AS">Cheque</option> </select> </div> </div> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Condition</h3> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <label class="control-label" for="level">Level</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="level" required="true" name="level"> <option selected>select menu</option> <option value="AF">1</option> <option value="AX">2</option> <option value="AS">3</option> </select> </div> <div class="col-md-1 mb-3"></div> <div class="col-md-2 mb-3"> <label class="control-label" for="zone">Zone</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="zone" required="true" name="zone"> <option selected>select menu</option> <option value="AF">1</option> <option value="AX">2</option> <option value="AS">3</option> </select> </div> </div> <div class="form-row"> <div class="col-md-3 mb-3"> <div class="form-group"> <label class="control-label" for="date">AUTO</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="auto" name="auto" value="yes" checked>Yes </label> <label class="radio-inline"> <input type="radio" id="auto" name="auto" value="no">No</label> </div> </div> </div> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Strict</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="strict" name="strict" value="yes" checked>Yes </label> <label class="radio-inline"> <input type="radio" id="strict" name="strict" value="no">No</label> </div> </div> </div> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Show Name</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="showName" name="showName" value="yes" checked>Yes </label> <label class="radio-inline"> <input type="radio" id="showName" name="showName" value="no">No</label> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Topic 2 --> <div class="panel panel-primary"> <div class="panel-heading" id="scrollspyTopic2"> <B> TOPIC 2 </B> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <div class="form-row"> <div class="col-md-3 mb-3"> <div class="form-group"> <label class="control-label" for="date">Type</label> <!-- Default checked radio --> <div class="form-check"> <div class="radio"><label><input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="aaaCheck">AAA</label></div> <div class="radio"><label><input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="bbbCheck">BBB</label></div> <div class="radio"><label><input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="cccCheck">CCC</label> <div id="ifCCC" style="visibility:hidden"> <input type="text" class="form-control" id="yes" placeholder="email"> </div> </div> </div> </div> </div> <div class="col-md-2 mb-3"> <div class="form-group"> <label for="validationServer013">Formal Record</label> <input type="text" class="form-control" id="validationServer013" placeholder="formal"> </div> </div> </div> </div> </div> </div> </div> <!-- End of Topic 2 --> <!-- Topic 3--> <div class="panel panel-primary"> <div class="panel-heading" id="scrollspyTopic3"> <B> TOPIC 3 </B> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <div class="form-row"> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Common Data</h3> <h6 class="card-subtitle mb-2 text-muted">Common Data</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <label for="validationServer013">Code *</label> <input type="text" class="form-control" id="validationServer013" placeholder="name" required> </div> <div class="col-md-1 mb-3"></div> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Status</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="true" checked>มีสิทธิ์ </label> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="false">ไม่มีสิทธิ์ </label> </div> </div> </div> </div> <div class="form-row"> <div class="col-md-3 mb-4"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> <label class="form-check-label" for="inlineCheckbox3">3</label> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Effective Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Expire Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Start Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Contact</h3> <h6 class="card-subtitle mb-2 text-muted">Contact Detail</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <div class="form-group"> <label class="control-label" for="PayType">General</label> </div> </div> <div class="col-md-3 mb-3"> <label for="validationServer013">Data 1</label> <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script> <div class='item1'> <input type="text" name="tel[]" placeholder="" class="form-control" id="tel1" > <button id="add1" class="btn btn-light btn-sm">+</button> </div> <div id="items1"></div> </div> <div class="col-md-3 mb-3"> <label for="validationServer013">Data 2</label> <div class='item2'> <input type="text" name="tel2[]" placeholder="" class="form-control" id="tel2"> <button id="add2" class="btn btn-light">+</button> </div> <div id="items2"></div> </div> <div class="col-md-3 mb-3"> <label for="validationServer013">Data 3</label> <div class='item3'> <input type="text" name="tel3[]" placeholder="" class="form-control" id="tel3"> <button id="add3" class="btn btn-light">+</button> </div> <div id="items3"></div> </div> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Finance</h3> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <label class="control-label" for="level">Bank</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="level" required="true" name="level"> <option selected>select menu</option> <option value="AF">1</option> <option value="AX">2</option> <option value="AS">3</option> </select> </div> </div> <div class="form-row"> <div class="col-md-2 mb-3"> <label for="validationServer013">No</label> <input type="text" class="form-control" id="validationServer013" placeholder="name" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer013">Name</label> <input type="text" class="form-control" id="validationServer013" placeholder="tax_no" required> </div> <div class="col-md-3 mb-3"> <label for="validationServer013">Branch</label> <input type="text" class="form-control" id="validationServer013" placeholder="tax_name" required> </div> <div class="col-md-2 mb-3"> <label class="control-label" for="zone">Type</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="zone" required="true" name="zone"> <option selected>select menu</option> <option value="AF">1</option> <option value="AX">2</option> <option value="AS">3</option> </select> </div> </div> <div class="form-row"> <div class="col-md-10 mb-3"> <div class="form-group"> <label for="exampleFormControlTextarea1">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> </div> </div> <div class="form-row"> <div class="col-md-2 mb-3"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">Status XXX </label> </div> </div> <div class="col-md-4 mb-3"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Expire Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> </div> </div> </div> </div> <button type="submit" class="btn btn-primary mb-2">Submit</button> </div> </div> </div> </div> </div> <!-- End of Topic 3 --> <!-- Topic 4 --> <div class="panel panel-primary"> <div class="panel-heading" id="scrollspyTopic4"> <B> TOPIC 4 </B> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-body"> <h3 class="card-title">Common Data</h3> <h6 class="card-subtitle mb-2 text-muted">Common Data</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <label for="validationServer013">Code *</label> <input type="text" class="form-control" id="validationServer013" placeholder="name" required> </div> <div class="col-md-1 mb-3"></div> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Status</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="true" checked>มีสิทธิ์ </label> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="false">ไม่มีสิทธิ์ </label> </div> </div> </div> </div> <div class="form-row"> <div class="col-md-3 mb-4"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> <label class="form-check-label" for="inlineCheckbox3">3</label> </div> </div> </div> </div> </div> </div> </div> </div> <!-- End of Topic 4 --> </div>
function yesnoCheck() { if (document.getElementById('cccCheck').checked) { document.getElementById('ifCCC').style.visibility = 'visible'; } else document.getElementById('ifCCC').style.visibility = 'hidden'; } $(document).ready(()=>{ let template = ` <div class='item1'><input type="text" name="items1[]" placeholder="" class="form-control" id="tel1"/> <button class="remove btn btn-light">x</button></div>`; $("#add1").on("click", ()=>{ $("#items1").append(template); }) $("body").on("click", ".remove", (e)=>{ $(e.target).parent("div").remove(); }) let template2 = ` <div class='item2'><input type="text" name="items2[]" placeholder="" class="form-control" id="tel2"/> <button class="remove2 btn btn-light">x</button></div>`; $("#add2").on("click", ()=>{ $("#items2").append(template2); }) $("body").on("click", ".remove2", (e)=>{ $(e.target).parent("div").remove(); }) let template3 = ` <div class='item3'><input type="text" name="items3[]" placeholder="" class="form-control" id="tel3"/> <button class="remove3 btn btn-light">x</button></div>`; $("#add3").on("click", ()=>{ $("#items3").append(template3); }) $("body").on("click", ".remove3", (e)=>{ $(e.target).parent("div").remove(); }) });

Related: See More

Vue Material Kit

Questions / Comments: