JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="big" id="service-1" name="service[]" maxlenght="100" value="5"/>
<input type="text" class="big" id="service-2" name="service[]" maxlenght="100" value="1"/>
<input type="text" class="big" id="service-3" name="service[]" maxlenght="100" value="2"/>
<input type="text" class="big" id="service-4" name="service[]" maxlenght="100" value="3"/>
<input type="text" class="big" id="service-5" name="service[]" maxlenght="100" value="4"/>
<p>Output:</p>
<div id="output"></div>
<p>&nbsp;</p>
<p>Change a value above to see refreshed output.</p>

CSS

#output {
    background : gold;
    border     : 1px solid #000;
}

JavaScript

$('input').on('change keyup', function () {
    $('#output').html($('[name="service[]"]').serialize());
}).trigger('change');