JSFiddle - React, Tailwind, and code Playground

HTML

<div id="strings">
    <input type="text" name="allStrings[0]" value="First" />
    <input type="text" name="allStrings[1]" value="Second" />
</div>
<div id="newstring" style="display:none;">
    <input type="text" name="allStrings[#]" />
</div>
<button type="button" id="addstring">Add</button>

CSS

input {
    display:block;
}

JavaScript

var container = $('#strings');
$('#addstring').click(function() {
    var index = container.children('input').length;
    var clone = $('#newstring').clone();
    clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    container.append(clone.html());
    container.children('input').last().focus();
});