Cloning a bootstrap input-group into a table

Question

I am cloning a hidden input-group into a table: JSFiddle

input-group:

      <div id="protoTextInput" class="input-group">
        <input type="text" class="form-control input-sm" value="tw.local." />
        <span class="input-group-btn">
            <button type="button" class="btn btn-info btn-sm" onclick="autoVar(this);"><i class="glyphicon glyphicon-flash"></i></button>
        </span>
      </div>

js-clone:

var filterTable = $('#filterTable').find('tbody');
    var i = (filterTable.find('tr').length + 1);
    filterTable.append(
      '<tr><td>' + i + '</td><td>Test</td><td>' + '</td><td></td>' + '<td><button onclick="remColumnFromFilters(this);" type="button" title="remove from filters" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-trash"></i> remove</button></td></tr>'
    );
    // Add operator select
    filterTable.find('tr:last td:nth-child(3)').append(
      $('#protoOperators').clone().attr('id', 'operator_' + i).show()
    );
    // Add Input for value
    filterTable.find('tr:last td:nth-child(4)').append(
      $('#protoTextInput').clone().attr('id', 'txt_' + i).show()
    );

But the input-group gets destroyed (breaks between input and button).

Any idea why?

Answer 1

So apparently, when I was first creating this on JSFiddle I used a newer version of jQuery and everything worked. - what the hell?

In my code I used jQuery v1.11.2 which caused the break. v3.2.1 works as wanted.

So this stays here for anyone running in the same problem.

Answer 2

You can style the input inside the table to not take 100% width and it will solve your styling problem:

#filterTable input.form-control.input-sm {
    width: calc(100% - 50px);
}

Here is a working example:
https://jsfiddle.net/57ozm4no/2/