JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<div class="container">
      <form id="changeMe">
        <ul id="pq_entry_1" class="clonedSection">
          <li>
            <input id="year_1" name="year_1" value="Year" type="text">
          </li>
          <li>
            <input id="qualification_1" name="qualification_1" value="Qualification"
            type="text">
          </li>
          <li>
            <input id="university_1" value="University" name="university_1" type="text">
          </li>
        </ul>
        <input type="button" id="btnAdd" value="add another row">
        <input type="button" id="btnDel" value="delete row">
        <input type="submit" onclick= "">
      </form>

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');
});

$('#changeMe').on('submit', function (e) {
    //prevent the default submithandling
    e.preventDefault();
    //send the data of 'this' (the matched form) to yourURL
    $.post('changeMeToo.php', $(this).serialize());
});