jQueryで「$()」と書いているのに「jQueryオブジェクトを含む変数」にならない

Question

###質問内容
jQeuryで「$()」と書くタイミングが異なる場合、「jQueryオブジェクトを含む変数」になったりならなかったりする原因を知りたいです。

###HTML、CSS
以下.formsにテキストボックスを挿入し、そこに「aです」などをプレースホルダーのようにセットしたいと考えています。
そのためのjQueryの挙動を問題視しています。

<button type="button" data-kind="a">「aです」をセット</button>
<button type="button" data-kind="b">「bです」をセット</button>
<div class="forms">
  <ul>  
  </ul>
</div>

.dummy {
	position: absolute;
	opacity: 0;
}
.dummy, .clone {
	height: 200px;
	width: 300px;
	border: 1px solid black;
	margin: 0 0 10px 0;
	padding: 0;
}
ul,li{
	list-style: none;
}

###問題・ソースコード
次のjQeuryをご覧ください。

【4行目】でなく【5行目】を使った場合、「aです」や「bです」がセットされて問題ありません。
しかし【4行目】を使った場合セットされず、これを問題視しています。

なぜならここで「$()」と書かずとも、【8行目】で「$()」を書いているため、セットされるはずだという考えだからです。なぜ「$()」と書くタイミングによって結果が異なるのか、腹落ちできません。

【9行目】でコンソールを出してみると、やはり【5行目】と【8行目】のどのタイミングで「$()」と書かによって異なるログとなりますが、なぜ【8行目】では「$()」が効かないのでしょうか？

// placeholderをセット
$('button').click(function(){
	var kind = $(this).attr('data-kind');
	var li = '<li>' + html( kind ) + '</li>';    //【4行目】こちらではセットされない
	var li = $('<li>' + html( kind ) + '</li>'); //【5行目】「aです」や「bです」がセットされる
	$('.forms > ul').html( li );	
	var textarea = $(li).find('textarea');
	var $textarea = $(textarea);                 //【8行目】
	console.log( '$textarea =', $textarea );     //【9行目】
	set_placeholder( $textarea );
});

// formのHTMLを取得
function html( kind ){
	const placeholder = kind + 'です';
	return `
	<div class="form">
		<textarea class="dummy"></textarea>
		<div class="clone" data-placeholder="${ placeholder }">ここに「aです」や「bです」をセットしたい</div>
	</div>
	`;
}

// placeholderをセット
function set_placeholder( $textarea ){
	$clone = $textarea.closest('.form').find('.clone');
	$dummy = $textarea.closest('.form').find('.dummy');
	const placeholder = $clone.attr('data-placeholder');
	$clone.html( placeholder );
	$dummy.val('');
}

Answer 1

$('.forms > ul').html( li );

で設定したliと

var textarea = $(li).find('textarea');

で新たに作ったliが別物だからです

Comments

[yambejp]

あえてやるなら
var textarea = $('.forms >ul>li').find('textarea');
みたいな参照方法が必要になります

[BAKI]

恐れ入りますがもう少し順を追ってご説明願えませんでしょうか…
きっと必要十分でのみお答えいただいたのかと思いますが、初心者にはなかなか追いつけません。

[yambejp]

$('.forms > ul').html( li );
とした時点で文字列から得られたliがulに追加されます
しかしvar textarea = $(li).find('textarea');すると
$('<li>')をしているということで、これは新しいli要素を作っています。
当然それは直前に投入したliとは何の関係もないものです。
したがってそこから派生したtextareaに付随するcloneをいくらいじっても
.forms 内にあるliには何の影響も与えません

[yambejp]

ポイント：
$('<xxx>')は参照ではなく新規作成ということを理解ください

[BAKI]

なるほど理解できました。丁寧なご返信をありがとうございます。