Inserting multiple tags results in NULL data

Question

I am using bootstrap-tagsinput, found here: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

I have the following multi-tag input:

<select multiple data-role="tagsinput" name="jobarea" id="jobarea" placeholder="Select a job area or type to insert another." class="form-control"></select>
<div class="row mt-2">
    <div class="col-md-12">
        <button class="btn btn-sm btn-primary m-2" type="button" onclick="$('#jobarea').tagsinput('add', 'Leadership'); $(this).hide();" id="Leadership">Leadership</button>
        <button class="btn btn-sm btn-primary m-2" type="button" onclick="$('#jobarea').tagsinput('add', 'Governance Risk Management and Compliance'); $(this).hide();" id="Governance-Risk-Management-and-Compliance">Governance, Risk Management and Compliance</button>
        <button class="btn btn-sm btn-primary m-2" type="button" onclick="$('#jobarea').tagsinput('add', 'Offensive'); $(this).hide();" id="Offensive">Offensive</button>
        <button class="btn btn-sm btn-primary m-2" type="button" onclick="$('#jobarea').tagsinput('add', 'Defensive'); $(this).hide();" id="Defensive">Defensive</button>
        <button class="btn btn-sm btn-primary m-2" type="button" onclick="$('#jobarea').tagsinput('add', 'Social Engineering'); $(this).hide();" id="Social-Engineering">Security Engineering</button>
        <button class="btn btn-sm btn-primary m-2" type="button" onclick="$('#jobarea').tagsinput('add', 'Architecture'); $(this).hide();" id="Architecture">Architecture</button>
    </div>
</div>

For some reason, if I have more than 1 tag entered it returns NULL data for jobarea when I submit the form. If however there is only 1 tag, it shows the data on the request data.

The input is marked as multiple.

Any help is appreciated.