JSFiddle - React, Tailwind, and code Playground

HTML

<div id="optionBook1" class="clonedBook">
            <label for="txtSkillName1">
                <abbr title="Required">
                    <em><font color="red">*</font></em>
                </abbr>
                Skill Name
            </label>
                <input type="text" id="txtSkillName1" name="txtSkillName1" class="validate[required] inputLong"
                runat="server" />

                <p class="power"> 
                <label for="txtSkillLevel">
                    <abbr title="Required">
                        <em><font color="red">*</font></em>
                    </abbr>
                    Skill Level</label>
                <span>
                    <input type="text" id="txtSkillLevel1" name="txtSkillLevel1" class="validate[required] inputLong"
                        value="" />
                </span>
            </p>
            <p>
                <label for="txtSkillDescription">
                    <abbr title="Required">
                        <em><font color="red">*</font></em>
                    </abbr>
                    Skill Description</label>
                <span>
                    <textarea style="overflow: auto; resize: none" rows="3" cols="50" id="txtSkillDescription1"
                        name="txtSkillDescription1" class="validate[required] inputLong"></textarea>
                </span>
            </p>

            </div>
            <input type="button" id="btnAdd1" value="Add" />
                 <input type="button" id="btnDel1" value="Remove" />

JavaScript

$('#btnAdd1').click(function () {

        // create the new element via clone(), and manipulate it's ID using newNum value
        var newElem = $('#optionBook1').clone().attr('id', 'optionBook2');


        // manipulate the name/id values of the input inside the new element
    $(newElem).find('[id=txtSkillName1]').attr('name', 'txtSkillName2');    
    $(newElem).find('[id=txtSkillName1]').attr('id', 'txtSkillName2');
        
    $(newElem).find('[id=txtSkillLevel1]').attr('name', 'txtSkillLevel2');    
    $(newElem).find('[id=txtSkillLevel1]').attr('id', 'txtSkillLevel2');
        
    $(newElem).find('[id=txtSkillDescription1]').attr('name', 'txtSkillDescription2');    
    $(newElem).find('[id=txtSkillDescription1]').attr('id', 'txtSkillDescription2');
        
        // insert the new element after the last "duplicatable" input field
        $(newElem).insertAfter('#optionBook1');


    });