Adding one more form in html-CodePudding

This is the my code. I want to add one more medicine when I click on button, How can I do this task?

<html>
<body style="color:black; font-size:20px;">
<form>
    <label style="margin-right:95px;"> Medicine </label> 
    <label style="margin-right:135px;"> Qty. </label>
    <label> Timing-Freq-Duration </label> <br>
    <input type="text" id="medicine" name="medicine" placeholder="Medicine Name">
    <input type="text" id="quantity" name="quantity">
    <input type="text" id="duration" name="duration">
    <input type="submit" style="margin-left:30px;" value=" ">
</form>
</body>
</html>

CodePudding user response：

Not sure what you can/can't do outside of what you've mentioned, but I'd probably do something like this.

$(document).ready(function(){
  var i = 0;
  
  $('#add-row').click(function(){
    $('#init-group').first().clone(true).attr('id','med-' i).insertAfter('form .form-group:last');
    i  ;
  });
});

form .form-group {
  float: left;
  margin-top: 5px;
}

form span {
    background: #EFEFEF;
    border: 1px solid #767676;
    font-size: 0.9rem;
    position: relative;
    top: 5px;
    padding: 0px 6px 3px;
    cursor: pointer;
    float: left;
    margin-left: 5px;
}

input[type="submit"]{
  margin-top: 2rem;
}
.form-row::after,
input[type="submit"]::after{
  content:"";
  clear: both;
  display: table;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <div class="form-headers">
    <label style="margin-right:95px;"> Medicine </label> 
    <label style="margin-right:135px;"> Qty. </label>
    <label> Timing-Freq-Duration </label>
  </div>
  
  <div class="form-row">
    <div id="init-group" class="form-group">
      <input type="text" id="medicine" name="medicine" placeholder="Medicine Name">
      <input type="text" id="quantity" name="quantity">
      <input type="text" id="duration" name="duration">
    </div>
    <span id="add-row"> </span>
  </div>
  
  <input type="submit" value="Submit">
</form>

CodePudding user response：

You need to use Javascript.
This is an simple example with jQuery library and Bootstrap (mainly to get the styling).
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://jquery.com/

Check the DEMO below:

$(function(){
    $('#add-row').click(function(){
       $(".row:first-child").clone().prependTo(".container-fluid"); 
    });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="container-fluid p-4">
  <div class="row mb-3">
    <div class="col">
      <label for="" class="form-label">Medicine</label>
      <input type="text" class="form-control" id="" placeholder="Medicine Name">
    </div>
    <div class="col-2">
      <label for="" class="form-label">Qty.</label>
      <input type="text" class="form-control" id="">
    </div>
    <div class="col-2">
      <label for="" class="form-label">Timing</label>
      <input type="text" class="form-control" id="">
    </div>
  </div>
  <button class="btn btn-outline-primary" id="add-row">Add Medicine</button>
</div>