Add a row in a html table using JavaScript and JQuery

Get the data from a html table and create a row and add that row in an existing html table with a button click. Here we use bootstrap 4.5 for design the page and Java Script and JQuery for set the new row in an existing HTML table.

<!DOCTYPE html>
<html>
 <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.css">
 </head>
 <body>
   <main>
     <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">
             <table class="table">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Phone No</th>
                    <th>EMail</th>
                  </tr>
                </thead>
                <tbody>
                 <tr>
                    <td>Kanchan kumari</td>
                    <td>Ballygunge Kolkata</td>
                    <td>9865955550</td>
                    <td>kanchankumari@gmail.com</td>
                  </tr>
                  <tr>
                    <td>Rachna singh</td>
                    <td>Ballygunge Kolkata</td>
                    <td>9862222998</td>
                    <td>rachna34@gamil.com</td>
                  </tr>
                  <tr>
                    <td>Priya Pandey</td>
                    <td>Varanashi U.P</td>
                    <td>9865234550</td>
                    <td>varanashi@gmail.com</td>
                  </tr>
                  <tr>
                    <td>Kanchan kumari</td>
                    <td>Varanashi U.P</td>
                    <td>9865955550</td>
                    <td>varanashi2@gmail.com</td>
                  </tr>
               </tbody>
             </table>
           </div> 
           <div class="col-md-6">
             <form>
               <div class="form-group">
                 <label for="sname">NAME</label>
                 <input type="text" class="form-control" id="sname" placeholder="name">
               </div> 
                <div class="form-group">
                 <label for="sadd">ADDRESS</label>
                 <select class="form-control" id="sadd">
                  <option value="Ballygunge Kolkata">Ballygunge Kolkata</option>
                  <option value="Damdam Kolkata">Damdam Kolkata</option>
                  <option value="Varanashi U.P">Varanashi U.P</option>
                  <option value="Varanashi U.P">Varanashi U.P</option> 
                 </select>
               </div> 
               <div class="form-group">
                 <label for="cno">PHONE NO</label>
                 <input type="number" class="form-control" id="cno"
               </div> 
               <div class="form-group">
                 <label for="cemail">E-MAIL ID</label>
                 <input type="text" class="form-control" id="cemail">
                </div>
                <button type="button" id="mybtn" class="btn btn-primary">Add</button>
             </form>
           </div> 
         </div>
       </div>
     </section>
   </main>
   <script src="jquery.js"></script>
   <script src="popper.min.js"></script>
   <script src="bootstrap.js"></script>
   <script>
      $(document).ready(function(){
               $("#mybtn").click(function(){
                  msg="<tr>
				    <td>" + $("#sname").val() + "</td>
				    <td>" + $("#sadd").val() + "</td>
				    <td>" + $("#cno").val() + "</td>
				    <td>" + $("#cemail").val() + "</td> 
				  </tr>";  
                  $("#tab-data").append(msg); });
                  });
    </script>
  </body>
</html>