Add New Row with Dynamic name

add-new-row-with-dynamic-row

<!-- First Create a Template to append -->
<script type="text/plain" id="row_template" >
	<tr>
	   <td><input type="text" Placeholder="Simple" data-property="first_simple"></td>
	   <td><input type="text" Placeholder="Simple" data-property="second_simple"></td>
	   <td><input type="text" Placeholder="Simple" data-property="third_simple"></td>
	</tr>
</script>


<!-- Second:: Create wanted to add Table-->

<input type="submit" value="Add Row" id="add-new-row">
<table>
    <thead>
        <tr>
            <th>First Simple</th>
            <th>Second Simple</th>
            <th>Third Simple</th>
        </tr>
    </thead>
    <tbody id="row_container">                
        
    </tbody>
</table>

<script type="text/javascript">
	var current_counter = 0;

	function addnewrow(data) {
        var template = $($('#row_template').html());

        $(template).find('input').each(function(){
            var property = $(this).attr('data-property');
            
            $(this).attr('name','simple['+current_counter+']['+property+']'); 
            //Result Ex::simple[0][first_simple]
            		//	 simple[1][first_simple]
            		//	 simple[2][first_simple]

            $(this).val(data[property]);
        });

        $('#row_container').append(template);

        current_counter++;
    }

    //When user click add new row
    $('#add-new-row').on('click',function(data){
        addnewrow(data);
    });
</script>