jQuery append function shows result in an increase number -

my goal every time choose operation , press "save" button, tag operation's name appear after class change_creation. here's code

$('#operations1').on('input',function(){         switch($(this).val()){         case "j":           operation_name = "j";           document.getelementbyid("j").style.visibility = "visible";         break;         case "r":           operation_name = "r";           document.getelementbyid("r").style.visibility = "visible";             break;         case "s":           operation_name = "s";           document.getelementbyid("s").style.visibility = "visible";         break;         case "c":            operation_name = "c";            document.getelementbyid("c").style.visibility = "visible";         } }); $('.button_save').click(function(){       $('.change_creation').append('<text>'+operation_name+'</text>'); }) 

the problem if choose "j" first time, show 1 tag "j" under class change_creation, second, if choose "r", show 2 "r" tags, increases tag number 1 every time. want 1 tag every time. problem here? did use append function in wrong way?

your $('.button_save').click getting defined everytime on selecting input.

var operation_name  = ''; //global; $('#operations1').on('input',function(){         switch($(this).val()){             case "j":                 operation_name = "j";             break;             case "r":                 operation_name = "r";                break;             case "s":                 operation_name = "s";             break;             case "c":                 operation_name = "c";             } );//ending on('input .. here $('.button_save').click(function(){       $('.change_creation').append('<text>'+operation_name+'</text>'); })