When I click the button its id, name and val attribute change successfully in ajax success. But if If I click it again the old function attached to the previous id is called not the one attached to the new id. I checked other posts but they did not worked for me either.

1.     <input type="submit" name="textareaInsert" id="textareaInsert" class="textareaInsert" value="Insert data">
   
   
   
   
       //script
       $(document).ready(function() {
           graph_post_data();
           graph_update_data();
       });
       
       function graph_post_data() {
           $('#textareaInsert').on("click", function() {
               var poll_id = $('#poll_id').val();
               var graph_data = $('#graphPost').val();
               var ownerid = $('#ownerid').val();
               var ownername = $('#ownername').val();
               var insert = 'insert';
       
               if(ownerid != null || graph_data != '') {
                   $.ajax({
                       type:"post",
                       url:"reg2.php",
                       data: {insert:insert, poll_id:poll_id, graph_data:graph_data, ownerid:ownerid, ownername:ownername},
                       success: function() {
                            $('#textareaInsert').attr("id", "textareaUpdate").attr("name","textareaUpdate").val("Update");
                    }
                   }).error(
                       function() {
                           console.log("Error in inserting graph data")
                       }
                   ).success(
                       function(data) {
                           var Poll_insert_data = jQuery.parseJSON(data);
                           $('#poll_author').text(Poll_insert_data.data.publisherName);
                           $('#owner_input_data').append(Poll_insert_data.data.data);
                       }
                   );
               } else {
                   alert('Please write something first.');
               }
           });
       }
       
       
       function graph_update_data() {
           $('#textareaUpdate').on("click", function() {
       
                var poll_id = $('#poll_id').val();
                var graph_data = $('#graphPost').val();
                var ownerid = $('#ownerid').val();
                var ownername = $('#ownername').val();
                var update = 'update';
       
                if(ownerid != null || graph_data != '') {
                $.ajax({
                type:"post",
                url:"reg2.php",
                data: {update:update, poll_id:poll_id, graph_data:graph_data, ownerid:ownerid, ownername:ownername},
                }).error(
                function() {
                console.log("Error in updating graph page data")
                }
                )
                .success(
                function(data) {
       
                var Poll_insert_data = jQuery.parseJSON(data);
                $('#poll_author').text(Poll_insert_data.data.publisherName);
                $('#owner_input_data').text("").append(Poll_insert_data.data.data);
                
                }
                );
                } else {
                alert('Please write something first.');
                }
           });
       }

When I click the button first time 'Insert data' successfully changes its attributes to that of "Upload". But when I click "Upload", function graph_post_data() is called instead of graph_update_data(). I'm not getting what's the problem. Please help me figure it out.