Dynamic element input select

Dynamic element input select

you know, It is the code when you click the any class, it changed and
created dynamically input and select element. I change the element's value
and then focus go out, It change text node originally. but sometimes, It
works improperly. I want to know more advanced code. please any advice!!
$(document).ready(function () {
$(".set_dt").click(function () {
var val = $(this).text();
var inp_obj = document.createElement("input");
inp_obj.type = "text";
inp_obj.value = val;
$(this).text('');
this.appendChild(inp_obj);
inp_obj.select();
$(inp_obj).bind("blur", function () {
var set_dt = inp_obj.value;
var txt_obj = document.createTextNode(set_dt);
$(inp_obj).after(txt_obj);
//data ajax transition
inp_obj.parentNode.removeChild(inp_obj);
});
});
$(".pro_st").click(function () {
var val = $(this).text();
var app_no = $(this).val();
var sel_obj = document.createElement("select");
var opt1 = document.createElement("option");
var opt2 = document.createElement("option");
opt1.value = "app_ing";
opt1.appendChild(document.createTextNode("applying"));
opt2.value = "app_ed";
opt2.appendChild(document.createTextNode("applied"));
sel_obj.appendChild(opt1);
sel_obj.appendChild(opt2);
$(this).text('');
this.appendChild(sel_obj);
for (var i = 0; i < sel_obj.length; i++) {
if (sel_obj.options[i].text == val) {
sel_obj.options[i].selected = "selected";
}
}
$(sel_obj).change(function () {
var pro_st_txt = sel_obj.options[sel_obj.selectedIndex].text;
var pro_st = sel_obj.value;
var txt_obj = document.createTextNode(pro_st_txt);
$(sel_obj).after(txt_obj);
//data ajax transition
sel_obj.parentNode.removeChild(sel_obj);
});
});
});