Multiple form data

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="form-div" class="no-js">
    <form role="form" id="my-form" >
        <input type="text" name="person" placeholder="Person's Name" />
        <input type="text" name="interest" placeholder="Interest" data-more="#1" />
        <button id="1" class="btn btn-def">Add</button>
        <button type="submit" name="ok" class="btn btn-primary" >OK</button>
        <div id="result"></div>
    </form>
</div>

CSS

.no-js{
    background: red;
}
.btn-def{
    display:none;
}

JavaScript

(function($){
    $.fn.multiData = function( options ){
        var $this = this; 
        var id; // id of add button
        var defaults = { 
                        addMoreButton : true,
                        addCancelButton : true                        
            };
        var settings = $.extend( {}, defaults, options );
        var formData;
        var addButton;
        
        this.on('focusin', ':input', function(){
            var $inputName = $(this);
            id = $inputName.data( 'more' );
            addButton = $(id);
            addButton.show();
            
            // getting value from <input name="value">
            formData.name = $inputName.attr('name');
            console.log(formData.name + ' formData.name' );
        });
        
        this.on('focusout', ':input', function(){
            //id = $(this).data( 'more' );
            //id = '#' + id;
            var focussedBox = $(this);
            var textBoxData = $.trim( $(this).val() );
            if( textBoxData === '' ){
                addButton.hide();//$(id).hide();
            }
            else{
                addButton.on( 'click', function( event ){
                    event.preventDefault();
                    
                    console.log( 'initial ' + textBoxData );
                    formData.values.push( textBoxData );
                    console.log( 'ln 37 testBoxData=' + textBoxData + ' formData.values=' + formData.values + ' ' + formData.values.length);
                    
                    $(this).hide();//$(id).hide(); or addButton.hide() but later wont work dont know why.
                    focussedBox.val(''); // clearing the field after adding data.
                    
                    formData.show();
                    $( this).unbind( "click" );
                });
            }
        });
       
        
        formData = {
            name: null,
            values: [],
            show: function(){
               ...