```
<div id="sandbox">
<p>
    <label> Answer Type</label>
    <select name="ans_type[]">
        <option value="Image">Image</option>
        <option value="Text">Text</option>
    </select>
</p>
<p class="text">
    <label> Enter Answer</label>
    <textarea rows="5" cols="50" name="ans_text[]"></textarea>
</p>
<p class="image">
    <label> Upload Image</label> <br/>
    <input type="file" name="ans_image[]" class="btn"/>
</p>
<p>
    <label> Is Correct Answer</label>
    <input type="checkbox" name="isCorrectAnswer[]"/>
</p>

```

JS

```
$('#addButton').click(function() {
        var newHTML = "";
        newHTML += '<p><label> Answer Type</label><select name="ans_type[]"><option value="Image">Image</option><option value="Text">Text</option></select></p><p><label> Enter Answer</label><textarea rows="5" cols="50" name="ans_text[]"></textarea></p><p><label> Upload Image</label> <br/><input type="file" name="ans_image[]" class="btn"/></p>';
        $('#sandbox').html($('#sandbox').html() + newHTML);
    });
    $("input[name*='ans_type']").change(function() {
        alert("asd");
        var answer = $(this).val();
        if (answer == "Image") {
            $(".text").hide();
            $(".image").show();
        } else {
            $(".text").show();
            $(".image").hide();
        }
    });

```

When I select the drop down list of ans\_type the change function doesn't trigger. The problem should be lay on input[name\*='ans\_type'] <-- because when user click Add button, will duplicate the input so how should I change this to make the effect available for all ans\_type[] drop down list.