javascript - how to showing text field when select option is changed jquery

Question

i tried showing / appending a textfield when some condition in my select option is true, the problem is, it's not just a one select option, it's more than one so it make me confused...

it is my HTML :

<div class="col-md-2">
    <select name="check[]" class="form-control select">
        <option>Checked</option>
        <option>UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
    <select name="check[]" class="form-control select">
        <option>Checked</option>
        <option>UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
    <select name="check[]" class="form-control select">
        <option>Checked</option>
        <option>UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

my Jquery :

$(document).on("change", ".select", function(){
   var value = $(".select").val();
   if(value == "Checked"){
       var input = "<input type='text' name='test'>";
       $(".select").html(input);
   }
});

my code is not working, even the input is not showed...

any help will be very very appreciated

Answer 1

you can use this to get current changed select. Also use next to get the span in which you want to add input.

$(document).on("change", ".select", function(){
   var value = $(this).val();
   if(value == "Checked"){
   var input = "<input type='text' name='test'>";
   $(this).next('.text_area_appended_here').html(input);
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-2">
<select name="check[]" class="form-control select">
    <option>Checked</option>
    <option>UnChecked</option>
</select>
<span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
<select name="check[]" class="form-control select">
    <option>Checked</option>
    <option>UnChecked</option>
</select>
<span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
<select name="check[]" class="form-control select">
    <option>Checked</option>
    <option>UnChecked</option>
</select>
<span class="text_area_appended_here"></span>
</div>