JSFiddle - React, Tailwind, and code Playground

by mojtaba

HTML

<form method='post'>
    
        <div class="modules">
            <!-- modules container -->
        </div>
        
        <a href='#' id="AddModule">Add Module</a>
    </form>


    <!-- module template -->
    <div class="module raw">
        <input type='text' name='module[]' placeholder='Enter Module' />
        
        <a href='#' id='AddFeature'>Add Feature</a>
        
        <div class="features">
            <!-- features container -->
        </div>
        
        <hr />
    </div>
    
    <!-- feature template -->
    <div class="feature raw">
        <input type="text" name="module[][]" placeholder="placeholder" />
    </div>

CSS

.raw { display: none; }
.module .features div { margin-left: 40px; }

JavaScript

$(function () {
        $('body').on('click', '#AddFeature', function (e) {
            e.preventDefault();
            
            // clone a raw feature
            $('.feature.raw').clone()
            
            // remove class raw from it
            .removeClass('raw')
            
            // and append it to the current module
            .appendTo($(this).closest('.module').find('.features'));
        });

        $('body').on('click', '#AddModule', function (e) {
            e.preventDefault();
            
            // clone a raw module
            $('.module.raw').clone()
            
            // remove class raw from it
            .removeClass('raw')
            
            // and append it to the modules container
            .appendTo('.modules');
        });
    });