JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <form id="content">
    
    <div data-type="date" class="form-group">
    	<label class="control-label col-sm-5" for="dateInput">Date Input:</label>
    	<div class="col-sm-3">
    		<input type="text" name="dateInput[]" class="form-control date_picker" id="dateInput">
    	</div>
    </div>
    
    <div data-type="date" class="form-group">
    	<label class="control-label col-sm-5" for="dateInput">Date Input:</label>
    	<div class="col-sm-3">
    		<input type="text" name="dateInput[]" class="form-control date_picker" id="dateInput">
    	</div>
    </div>
    
    <input type="submit" value="Save Template" id="templateSubmit" class="btn btn-primary">
    
     </form>
    
    <div id="output">
    </div>

CSS

#output {
  width:600px;
  height:600px;
  background:#ccc;
}

JavaScript

$(function() {
var dataArray = [];

    $('#content').submit(function(event) {
        event.preventDefault();

        $("#content").find(".form-group").each(function() {
            var html = $(this).attr('class', 'form-group')[0].outerHTML.replace(/ data-(.+)="(.+)"/g, "");
            $(this).find('input[type="text"]').attr('id', this.id+$(this).index()+1);

            dataArray.push(html);
        });
       $("#output").text(dataArray);
		});
  
});