JavaScript Remove html autofocus use javascript/jquery remove autofocus html,remove input autofocus,remove autofocus input html

Here's my full code:

$('input').keypress(function(e){
    var code = e.keyCode || e.which,
    value    = $(this).val()

    if (code==13 && value!=''){
        $('.with-header').show()

        var secondaryContent = 'secondary-content',
        materialIcons        = 'material-icons',
        conllectiontItem     = 'collection-item'

        $('ul').append('<li class='+conllectiontItem+'>\
            <span class="words">'+value+'</span>\
            <span target='_blank' href="#" class='+secondaryContent+'>\
            <a class="'+materialIcons+' done">done</a>\
            <a class="'+materialIcons+' delete">delete</a>\
            <a class="'+materialIcons+' edit">edit</a>\
            </span></li>')

        //this to empty input
        $(this).val('')
    }
})

$('body').on('click', '.done', function(){
    $(this).parents('.collection-item').toggleClass('lineThrough')
})

$('body').on('click', '.edit', function(){
    var edit = $(this).parent().prev().html('<input class="listInput">')
})

$('body').on('click', '.delete', function(){
    $(this).parents('.collection-item').remove()
})

$('body').on('keypress','.listInput', function(e){
    var code = e.keyCode || e.which,
    value    = $(this).val()

    if (code==13 && value!=''){
        $(this).parent().html(value)
    }
})

Sorry I'm still beginner and I use materialize css framework, so it's kinda complicate to append.

What am I trying to do is making to do list which every list can be edit by clicking a button with class '.edit' and I want to give an autofocus into the list that was appended with <input>, but the autofocus only work once. I guess it's because I put the autofocus for every '.listInput'.

So after I append the html input, and I am done editing the list, I want to try remove the 'autofocus' from '.listInput' but I don't know how to do it?

can you help me with it or do you have another solution? thanks

Well, in that case try:

$('body').on('click', '.edit', function(){        
  $toEdit = $(this).parent().prev();
  $toEdit.html('<input class="listInput">')
  $toEdit.focus();
});