JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
where to append <select id="idx">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<button id="append">append</button>
<hr/>
<div id="Ctabs1-pane1" class="pane"></div>
<div id="Ctabs1-pane2" class="pane"></div>
<div id="Ctabs1-pane3" class="pane"></div>

<script id="pane-append" type="text/template">
    <br /><br /><br />
    <div id="buttonDiv{{index}}" class="col-lg-12" style="text-align:center">
        <legend></legend>
        <div class="btn-group">
            <button type="button" class="btn btn-default" onClick="downloadPDF({{index}})">
                <i class="glyphicon glyphicon-download-alt"></i> PDF
            </button>
            <button type="button" class="btn btn-default" onClick="saveData({{index}})">
                <i class="glyphicon glyphicon-ok"></i> Spara
            </button>
            <button type="button" class="btn btn-danger">
                <i class="glyphicon glyphicon-remove"></i> Neka
            </button>
            <button type="button" class="btn btn-success" onClick="confirmService({{index}})">
                <i class="glyphicon glyphicon-ok"></i> Klarrapportera
            </button>
            @if(!Model.StatusUpdates.Where(x => x.Status == 3).Any()) {
            <button type="button" class="btn btn-info" onClick="confirmService({{index}})">
                <i class="glyphicon glyphicon-ok"></i> Klarrapportera
            </button>
            }
        </div>
    </div>
</script>

CSS

.pane{padding:5px;border:1px solid #ccc;margin:5px;}

JavaScript

var template = $('#pane-append').html();

$('#append').on('click', function(){
    var index = $('#idx').val();
    $('#Ctabs1-pane' + index).append( template.replace(/{{index}}/gi, index) );
});