dynamic-input

    function fieldHTML(data){
        var fieldHTML = '<tr>';
            fieldHTML += '<td>';
            fieldHTML += '<span class="c-del">'+data+'</span>';
            fieldHTML += '</td>';
            fieldHTML += '<td>';
            fieldHTML += '<div class="file-loading">'
            fieldHTML +=   '<input class="holes-upload" name="hole_image[]" type="file" required>'
            fieldHTML +=  '</div>'
            fieldHTML += '</td>'
            fieldHTML += '<td>';
            fieldHTML += '<input type="number" class="form-control input" name="hole_par[]" required></textarea>';
            fieldHTML += '</td>';
            fieldHTML += '<td>';
            fieldHTML += '<input type="number" class="form-control input" name="hole_yards[]" required></textarea>';
            fieldHTML += '</td>';
            fieldHTML += '<td>';
            fieldHTML += '<textarea type="text" class="form-control input" name="hole_description[]" required></textarea>';
            fieldHTML += '</td>';
            // fieldHTML += '<td>';
            // fieldHTML += '<a href="javascript:void(0);" class="remove_button" title="Remove field">remove</a></div>'; //New input field html;
            // fieldHTML += '</td>';
            fieldHTML += '</tr>'
        return fieldHTML;
    }
$(document).ready( function() {
    var maxField = 18; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper

            var x = 0; //Initial field counter is 1
        $('#select-hole').on('change', function(){
            $('.field_wrapper').html('');
            for (var i = 0; i < this.value; i++) {
                if(x < maxField){
                    x++; //Increment field counter
                    $(wrapper).append(fieldHTML((x))); // Add field html
                 }
            }
        })

});