I am very new in jsp, and jquery
my code create dynamic text boxes and one drop-down menu based on button clicked,

after created textboxes I want to add one more textbox if the user select option male after the text boxes dynamically added.

the add code works, but the text box when selecting the male option not works.

please please help.

this is my code

```
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <br />
    <div class="container">
        <h3 align="center">Change Control Board (CCB)</h3>
        <br />
        <h4 align="center">Enter Change Details</h4>
        <br />
        <form name="form1" method="GET" action="jsv" id="form1">
            <div class="table-repsonsive">
                <span id="error"></span>
                <table class="table table-bordered" id="item_table">
                    <tr>
                        <th>Enter Change Name</th>
                        <th>Enter Change Description</th>
                        <th>Enter Change GW</th>
                        <th>Enter Change AW</th>
                        <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
                    </tr>
                </table>
                <div align="center">
                    <input type="submit" name="submit" class="btn btn-info" value="Insert" />
                </div>
            </div>
        </form>
    </div>
</body>

</html>
<script>
    $(document).ready(function() {

        $(document).on('click', '.add', function() {
            var html = '';
            html += '<tr> name="change_name1[]"';
            html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
            html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
            html += '<td><input  type="text" name="change_GW[]" class="form-control change_GW" /></td>';
            html += '<td><input style="display:none;" id="business"  type="text" name="change_G[]" class="form-control change_GW" /></td>';

            html += '<td><select id="purpose" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';

            html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
            $('#item_table').append(html);
        });

        $(document).on('click', '.remove', function() {
            $(this).closest('tr').remove();
        });
    });

    $(document).ready(function() {
        $('#purpose').on('change', function() {
            if (this.value == '1') {
                $("#business").show();
            } else {
                $("#business").hide();
            }
        });
    });
</script>

```