JSFiddle - React, Tailwind, and code Playground

HTML

<form id="ports">
    <div class="control-group">
        <label class="control-label" for="dataport_1">data port</label>
        <div class="controls">
            <input type="text" id="dataport_1" name="dataport_1" placeholder="Type something" />
        </div>
        <!-- end controls -->
    </div>
    <!-- end control-group-->
    <div> <a class="btn btn-primary pull-right" id="addportbtn">Add Another Port</a>

    </div>
</form>
<div id="cont">
<input type="button" value="serialize" id="but" />
</div>

JavaScript

var numports = 2; // make variable global, so it can be accessed by any function
$(function () { //execute on dom ready, so events are bound correctly.
    $('#addportbtn').click(function () {
        var addHtml = '<div class="control-group">' +
            '<label class="control-label" for="dataport_' + numports + '">data port</label>' +
            '<div class="controls">' +
            '<input type="text" id="dataport_' + numports + '" name="dataport_' + numports + '" placeholder="Type something"/>' +
            '</div> <!-- end controls -->' +
            '</div><!-- end cotrol-group-->'
        $("#ports .control-group:last").after(addHtml);

        numports++;
    });
    $("#cont").on('click', '#but', function () {
        //$(this).after($("#ports").serialize());
        alert($("#ports").serialize());
    });
});