【jQuery】inputフィールドに打ち込んだ文字列をhtmlの別要素にリアルタイムで1文字ずつ出力する

inputに入力した文字列を別要素（div）にリアルタイム出力します。
取得した文字列を配列に入れて、eachで１文字ずつ出力するので、１文字ずつspanで囲んでスタイリングすることができます。

デモ

See the Pen char by char by halkyo (@halkyo) on CodePen.dark

HTML

<form>
    <input class="input_strings" type="text" value="" placeholder="ここに入力" />
</form>
<div class="cell_wrapper"></div>

CSS

.cell_wrapper{
    margin-top:10px;
}
.char{
    display:inline-block;
    padding:5px;
    background-color: #eee;
    margin-right: 5px;
}

JavaScript

jQuery(function($){
    $(".input_strings").each(function(){
        $(this).bind("input", addchar(this));
    });
    function addchar(elment){
        var v, old = elment.value;
        return function(){
            if(old != (v=elment.value)){
                old = v;
                str = $(this).val();
                arrayChara=[...str];
                $(".cell_wrapper").empty();
                $.each(arrayChara, function(index, value){
                    $(".cell_wrapper").append(`
                    <span class="char">`+value+`</span>
                    `)
                });
            }
        }
    }
    //Enterや改行で送信させない
    $(function(){
        $("input"). keydown(function(e) {
            if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
                return false;
            } else {
                return true;
            }
        });
    });
});