How to Edit input type text field created from servlet

Question

I have created a text field from servlet

out.println("<input type='text' class='userValue' />");

it shows properly in my page. but when i click on the field it does not allow me to type anything. I mean normally u see a bar blinking when u type. This blinking is not showing.

It behaves like un-editable text field (I am using jQuery ajax call to put this from servlet to my page)

How to resolve this?

complete code

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");

        String noOfNodeSt = request.getParameter("numberOfNodes");
        String action = request.getParameter("action");

        PrintWriter out = response.getWriter();
        try {

            if (action.compareTo("actionOnSelectedNode") == 0) {
                int numOfSelectedNodeReceived = Integer.parseInt(request.getParameter("numberOfNodes").toString());

                for (int i = 0; i < numOfSelectedNodeReceived; i++) {
                    out.println("<select class='nodeFromDB"+i+"'>");
                    out.println("<option>Servlet Action1</option>");
                    out.println("<option>Servlet Action2</option>");
                    out.println("</select>");
                    out.println("<input type=\"text\" name=\"userValue\" />");

                }    
            }
        } finally {
            out.close();
        }
    }

JS Code

$(function() {

    $('#nodeType').bind('change', function(ev) {

        var value = $(this).val();
        if (value === 'Single Node') {
            //alert("g");
            document.getElementById("spanSetNoOfNodes").innerHTML = "<input type='text' value='1' class='textBoxNoOfNode' readonly/><input type='button' value='Generate' onclick='tfc();' class='generateButtonAction' id='generateButtonAction'/>";

        } else if (value === 'Multiple Nodes') {
            //alert("g");
            document.getElementById("spanSetNoOfNodes").innerHTML = "<input type='text' value='1' class='textBoxNoOfNode'/><input type='button' value='Generate' onclick='tfc();' class='generateButtonAction' id='generateButtonAction'/>";

        }

         $(document.body).on('click', 'input', function() {
         //alert($('.textBoxNoOfNode').val());
         $.ajax({
         url: 'http://localhost:8080/M08CDECUStructuralOptimiser/Interface1?action=actionOnSelectedNode',
         data: {numberOfNodes: $('.textBoxNoOfNode').val()},
         success: function(response) {
         //$('.upItemName').append(response);
         document.getElementById("test3").innerHTML = response;
         }
         });
         });




    });


});

Answer 1

It was probably replacing the response over and over

i added the onclick='tfc(); and moved the following part in it

     $(document.body).on('click', 'input', function() {
     //alert($('.textBoxNoOfNode').val());
     $.ajax({
     url: 'http://localhost:8080/M08CDECUStructuralOptimiser/Interface1?action=actionOnSelectedNode',
     data: {numberOfNodes: $('.textBoxNoOfNode').val()},
     success: function(response) {
     //$('.upItemName').append(response);
     document.getElementById("test3").innerHTML = response;
     }
     });
     });

now its working fine