multiform

by Subigya Panta

HTML

<div>
            <form id="my-form">
                <label>Cloth</label>
                <input id="cloth" type="text" name="cloth" value="" />
                <label>Price</label>
                <input id="price" type="text" name="price" value="" />
                <input type="submit" value="submit" />
                
            </form>
            <div id="container"></div>
        </div>

JavaScript

(function($){
    function addButton( buttonSetting, formObj ){
        var button = document.createElement( buttonSetting.tag );
        button.setAttribute( 'type', buttonSetting.type );
        button.setAttribute( 'class', buttonSetting.class );
        button.innerHTML = buttonSetting.text;
        
        formObj.append( button );
    }
    
    function showListOfItems( input, container, settings, uniqueId ){
        var item = document.createElement( 'p' );
        item.setAttribute( 'class', settings.output.visible.class );
        item.setAttribute( 'data-id', uniqueId );
        item.innerHTML = input[0] + ' ' + input[1] + ' <span class="close">X</span>';
        
        container.append( item );
    }
    
    function addHiddenFields( input, form, settings, uniqueId ){
        var field = document.createElement( 'input');
        field.setAttribute( 'type', 'hidden' );
        field.setAttribute( 'name', input[0] + '[]' );
        field.setAttribute( 'value', input[1] );
        field.setAttribute( 'data-id', uniqueId );
        
        form.append( field );
    }
    
    function resetInputFields( fields ){
        for( var i = 0; i < fields.length; i++ ){
            $( fields[i] ).val('');
        }
    }
$.fn.dynom = function( userSettings ){
    // create form alias
    var form = this;
    
    // create settings
    var defaultSettings = {
        button :{ 
            text    : 'add',
            class   : 'add',
            type    : 'button',
            tag     : 'button',
            id      : '#add'
        },
        input       : ['#cloth','#price'],
        output      : {
            visible :{
                class : 'lists'
            },
            hidden  :{
                
            }
        },
        dataContainer   : '#container'
    };
    var settings = $.extend( {}, defaultSettings, userSettings );
    
    // add button
    addButton( settings.button, form );
    
    // add button click handler
    form.on(...