JSFiddle - React, Tailwind, and code Playground

HTML

<form name="aaa" method="post">
    <div id="stylized" class="myform">
<div class="clon">
    <p id="a1" name="a1"></p>
    Name:<input id="b1" name="b1"><br>
    Address:<input id="b2" name="abc">
    <select id="c1" name="c1">
        <option>N</option>
        <option>M</option>
    </select>
    <button type="button" onclick="doClone()">Clone</button>
</div>
    <label>Email:</label><input id="c1" name="c1">
</div>
</form>

CSS

.myform{
margin:0 auto;
width:800px;
height:1200px;
padding:14px;
border-radius:15px;
border-style:groove;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}

JavaScript

function doClone() {
    var old = $('.clon').length;
    var newC = old + 1;
    var cloned = $('.clon:first').clone();
    
    // add more element types as needed here
    cloned.find('p,input,select').each(function() {
        id = $(this).attr('id');
        name = $(this).attr('name')
        $(this).attr('id', id.substring(0, id.length-1) + newC).attr('name', name.substring(0, name.length-1) + newC);
    });
    
    // change the parent container as needed
    cloned.appendTo('body');
}