I'm really new to using serializeArray in jQuery so please forgive me if i'm not asking the correct question.
I have a form which on click add the data to fields within a div ID which works fine, it keeps adding data each time i click which is great, however is it possible to split each form's results? For example, you type in a name and phone number, click add, then in the div ID #results it adds the data then i want the next time you add data, it add's it to the same div ID but seperated by a box
$("#saveAndAdd").click(function(){
addTrip();
var x = $(".cool-test").serializeArray();
$.each(x, function(i, field){
$("#results").append(field.value + " " );
});
});
function addTrip() {
var providerName = $("#providerName").val();
var providerPhone = $("#providerPhone").val();
$("#providerTypeValue").html(providerType);
$("#providerNameValue").html(providerName);
$("#providerPhoneValue").html(providerPhone);
<label class="uikit-text-input__label" for="Input field">Name</label>
<input class="uikit-text-input input-half" name="Input field" id="providerName" type="text" value="" aria-required="true">
<label class="uikit-text-input__label" for="Input field">Phone</label>
<input class="uikit-text-input input-half" name="Input field" id="providerPhone" type="text" value="" aria-required="true">