JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 <body>
<br>
<br>
    
              
                    <ul id="pq_entry_1" class="clonedSection">
        <div class="col-md-4">
            <form id="changeMe" action="welcome.php">
                
          <div class="form-group">
               <li>
            <label>
              Year
            </label>
           <input id="year_1"  class="form-control" name="year_1" value="Year" type="text">
         </li>  
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <li>
            <label>
              Univerisity
            </label>
                
  <input id="university_1" value="University" class="form-control" name="university_1" type="text">
          </li>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
              <li>
            <label>
              Quallification
            </label>
             <input id="qualification_1" name="qualification_1" class="form-control" value="Qualification"
            type="text">
                  </li>
                   </ul>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <input type="button" id="btnAdd" value="add another row">
            <input type="button" id="btnDel" value="delete row">
            <input type="submit" onclick="">
                </form>
                </div>

CSS

ul li {
    margin:0 5px;
    display:inline-block;
    width: 20%;
}

JavaScript

$(document).ready(function () {
    $('#btnAdd').click(function () {
        var num = $('.clonedSection').length;
        var newNum = new Number(num + 1);

        var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum);

        newSection.children(':first').children(':first').attr('id', 'year_' + newNum).attr('name', 'year_' + newNum);
        newSection.children(':nth-child(2)').children(':first').attr('id', 'qualification_' + newNum).attr('name', 'qualification_' + newNum);
        newSection.children(':nth-child(2)').children(':first').attr('id', 'university_' + newNum).attr('name', 'university_' + newNum);

        newSection.insertAfter('#pq_entry_' + num).last();

        $('#btnDel').prop('disabled', '');

        if (newNum == 5) $('#btnAdd').prop('disabled', 'disabled');
    });

    $('#btnDel').click(function () {
        var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have
        $('#pq_entry_' + num).remove(); // remove the last element

        // enable the "add" button
        $('#btnAdd').prop('disabled', '');

        // if only one element remains, disable the "remove" button
        if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
    });

    $('#btnDel').prop('disabled', 'disabled');
});
$(document).ready(function() {
    $('form').submit(function(msg) {  
        alert($(this).serialize()); // check to show that all form data is being submitted
        $.post("welcome.php",$(this).serialize(),function(data){
            alert(data); //post check to show that the mysql string is the same as submit                        
        });
        return false; // return false to stop the page submitting. You could have the form action set to the same PHP page so if people dont have JS on they can still use the form
    });
});