JSFiddle - React, Tailwind, and code Playground

by jakenrush

HTML

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1" class="form-inline control-group">
        <input type='button' value='Add' id='addButton' />
    </div>
</div>

JavaScript

var counter = 2;
    var availableTags = ["php","php frameword","php tutorial","jquery","ajax","mysql","wordpress","wordpress theme","xml"];

$("#addButton").click(function () {
    var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'TextBoxDiv' + counter);

    var roleInput = $('<input/>',{
        type:'text',
        placeholder:'Role',
        name:'Role'+counter,
        id:'textbox' + counter
    });
    var priceInput = $('<input/>',{
        type:'text',
        placeholder:'price',
        name:'price'+counter,
        id:'textbox' + counter
    });
    
    var searchInput = $('<input/>',{
        type:'text',
        placeholder:'search',
        name:'search'+counter,
        id:'se' + counter
    });
    
    var hidd=$('<input/>',{
        type:'hidden',
        name:'searchhid'+counter,
        id:'searchhid' + counter
    });
    
    
    newTextBoxDiv.append(searchInput).append(roleInput).append(priceInput).append(hidd);
    newTextBoxDiv.appendTo("#TextBoxesGroup");
    $('#se' + counter).autocomplete({
        source: availableTags
    });
    counter++;
});