Question: At the moment I have 2 select inputs. I listen for a change in them and then grab their value. I have set up a little [JSFiddle](https://jsfiddle.net/vt2czgse/10/). 

```
$('.cSelectType').on('change', function(){
    var value = $(this).val();
});

```

What I am looking to do is add the chosen number of text inputs under each select. If they select `2` in select1, 2 text inputs should be added under select1. Would something like this be possible? If so, how?

Thanks

Answer: 
try this [demo](https://jsfiddle.net/gurvinder372/vt2czgse/12/)

```
$(function() {
    $('.cSelectType').select2({
        tags: false
    });

     $('.cSelectType').on('change', function(){
        var value = parseInt($(this).val());
        $(this).parent().find( ".text" ).remove();
        for ( var counter = 0; counter < value; counter++)
        {
           $( this ).parent().append( "<input type='text' class='text'>" )
        }

    });
});

```
To do this you can simply create a new hidden row under the current. You can then generate the required input HTML N times, and add it to the `td` related to the current `select` by its index, something like this:

```
$('.cSelectType').on('change', function() {
    var inputHtml = new Array(parseInt($(this).val(), 10) + 1).join('<input type="text" class="form-control" />');
    $('.inputs td').eq($(this).index('.cSelectType')).html(inputHtml);
    $('.inputs').show();
});

```

[**Working example**](https://jsfiddle.net/vt2czgse/20/)