ブログ機能にjQueryとjQueryCookieを使用し複数の文字を変換したいです

Question

前提・実現したいこと

用語が分からず、どうお伝えしたら良いのか分からない事が多くご面倒をおかけしますが、よろしくお願い致します。
サポート無しカスタマイズ可能のテンプレートを元にして、ブログ機能に入力欄を複数作り、デフォルトの文字を入力欄で入力した文字に変換させたいです。

発生している問題・エラーメッセージ

入力欄を複数作る事は出来ましたが、変換が全て同じになってしまいます。
デフォルトが午前中・昼・夜。
入力文字が10時・2時・7時。
上記の様に変換設定しても全て10時・10時・10時と変換されます。

該当のソースコード

テンプレート作者様がブログ上部表示に入力されたソースコード。

<!--名前変換用フォームここから--><!--formで囲う必要はありません--> <!--入力--> <input type="text" name="text" id="NameInput" /> <!--登録ボタン--> <input type="button" value="名前を保存する" id="NameChanger" /> <!--削除ボタン--> <input type="button" value="削除" id="reset" /><!--名前変換用フォームここまで--><!--表示サンプルここから--><!--class名"dname"の要素が置き換わります--> <div style="margin:20px 0;"> <span class="dname">デフォルト</span> </div><!--表示サンプルここまで-->

↑コードにしましたら表示されませんでしたので、文字にさせていただきます。

HEAD

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function(){
//Cookie呼び出し
if($.cookie("dreamname")){
$("span.dname").text($.cookie("dreamname"));
}
//Cookie保存(7日間)
$("#NameChanger").click(function(){
$.cookie("dreamname",$("#NameInput").val(),{ expires: 7 });
location.reload();
})
//Cookie削除
$("#reset").click(function(){
$.removeCookie("dreamname");
location.reload();
})
})
</script>
<!--名前変換用HEADここまで-->
コード

使い方
1.このテンプレートを使う（必要に応じてカスタマイズして下さい）。
2.記事の中で <code style="background:#DDD;"><span class="dname">デフォルト名</span></code> を使う。
これだけで入力したデータが <code style="background:#DDD;"><span class="dname">デフォルト名</span></code> と置き換わります。</div>

試したこと

教えていただいたjs-cookieへ変え、複数の設定をしたいのですが上手くいきません。
調べて出てくるCookieの書き方と違うものが多いのですが、書き方が違うのでしょうか？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript">
$(function(){
	//Cookie呼び出し
	if($.cookie("dreamname")){
		$("span.dname").text($.cookie("dreamname"));
	}
	//Cookie保存(7日間)
	$("#NameChanger").click(function(){
		$.cookie("dreamname",$("#NameInput").val(),{ expires: 7 });
		location.reload();
	})
$("#NameChanger").click(function(){
		$.cookie("dreamname2",$("#NameInput").val(),{ expires: 7 });
		location.reload();
	})
	//Cookie削除
	$("#reset").click(function(){
		$.removeCookie("dreamname");
		location.reload();
	})
})
</script>

コード

似た事が出来るタグを試してみましたが、こちらでは私の使用するブログ機能では変換出来ませんでした。

午前中<input name="ChosenName1" type="text" placeholder="午前中">
昼<input name="ChosenName2"  type="text" placeholder="昼">

<input type="button" value="決定" onclick="ChangeName()">&emsp;<input type="button" value="リセット" onclick="PgNew()">
</form>
</div>

<script type="text/javascript">
var name1 = "午前中";
var name2 = "昼";

function ChangeName(){
var ChangedName1 = document.NameChanger.ChosenName1.value;
var ChangedName2 = document.NameChanger.ChosenName2.value;

document.getElementById("OriginalStory").innerHTML = document.getElementById("OriginalStory").innerHTML.split(name1).join(ChangedName1).split(name2).join(ChangedName2);
return;
}

function PgNew(){
window.location.reload();
}
</script>
コード

補足情報（FW/ツールのバージョンなど）

・モバイルサイト(ナノ)のブログ機能を使用しています。
・ネットで調べたのですが応用出来るのか等が分からず、どこを変えたら良いのかが、いまいち分かりません。
・入力欄

昼<input type="text" name="text"style="width:100px;height:15px;" id="NameInput" /> 
夜<input type="text" name="text"style="width:100px;height:15px;" id="NameInput" /> 
<!--登録ボタン--> 
<input type="button" value="保存する" id="NameChanger" /> 
<!--削除ボタン--> <input type="button" value="削除" id="reset" />
コード

・変換タグ

<span class="dname2">昼</span>
<span class="dname3">夜</span>
コード

入力欄と変換をするタグは問題無いでしょうか？
長くなってしまい、申し訳ありませんがご教示いただけませんでしょうか？

Answer 1

//20100824
var defname = new Array();
var nametitle = new Array();
defname[0] = "ななし";
defname[1] = "無名";
nametitle[0] = "主人公の名前";
nametitle[1] = "主人公の苗字";
var boxwidth = "7";
var width ="100px";
var script = "ユメミニ";
var url ="http://dream.99.geo.jp";
function setCookie(x){
var d = new Date();
d.setTime( d.getTime() +60*60*24*x*1000 );
d = d.toGMTString();
var exp ="path=/;expires="+d+";";
var names = new Array();
names[0] = "namex0="+encodeURIComponent(document.nameform.name0.value)+";";
document.cookie = names[0]+exp;
if(defname[1]!=""){
	names[1] = "namex1="+encodeURIComponent(document.nameform.name1.value)+";";
	document.cookie = names[1]+exp;
	}
setTimeout('setText()',10);
}
function setText() {
var myname = document.getElementsByTagName("ins");
if(script!="" && url!=""){
for (i=0; i<myname.length; i++){
  myname[i].style.textDecoration="none";
	if(!myname[i].className){
		if(document.nameform.name0.value!=""){
			myname[i].innerHTML=document.nameform.name0.value;
		}
		else{
		document.nameform.name0.value=defname[0];
		var set = "x";
		}
	}
	else if(defname[1]!="" && myname[i].className=="1"){
		if(document.nameform.name1.value!=""){
		myname[i].innerHTML=document.nameform.name1.value;
		}
		else{
		document.nameform.name1.value=defname[1];
		var set = "x";
		}
	}
 }
if(set=="x"){setTimeout('setText()',10);}
}
}
document.write('<form name="nameform" class="nameform">');
document.write('<span class="sub" style="width\:'+width+'\;">'+nametitle[0]+'</span><input type="text" name="name0" value="'+defname[0]+'" size="'+boxwidth+'"><br>');
if(defname[1]!=""){document.write('<span class="sub" style="width\:'+width+'\;">'+nametitle[1]+'</span><input type="text" name="name1" value="'+defname[1]+'" size="'+boxwidth+'"><br>');}
document.write('<input type="reset" value="クリア" onClick="setCookie(-1)" class="button">　');
document.write('<input type="button" value="設定" onClick="setCookie(1)" class="button">　');
document.write('</form>');
    var cookies = document.cookie.replace(/\s/gm,"");
    var params = cookies.split(";");
    var val = new Array();
   for(var i=0;i<params.length;i++){
	var val = params[i].split("=");
	if(defname[0]!="" && val[0]=="namex0" && val[1]){
	val[1]=decodeURIComponent(val[1]);
	document.nameform.name0.value=val[1];
		}
	if(defname[1]!="" && val[0]=="namex1" && val[1]){
	val[1]=decodeURIComponent(val[1]);
	document.nameform.name1.value=val[1];
		}
	}
var nameform = document.getElementsByName("nameform");
var a = document.createElement("a");
a.href=url;
a.style.fontSize="12px";
a.innerHTML = script;
a.target="_blank";
nameform[0].appendChild(a);
setTimeout('setText()',10);
//--></script>
<noscript>JavaScriptがOFFのため、変換できません。<br>
<a href="http://dream.99.geo.jp">ブログ夢小説パーツ</a></noscript>
コード

こちらのブログ夢小説パーツというソースで代用させていただき、解決出来ました。有難うございます。

せっかく、ご教示いただけましたのに生かす事が出来ず申し訳ありません。

Answer 2

jquery-cookieはsamesite設定ができないのでもう使い物にならないかも
js-cookieライブラリなどを検討してみてください

Comments

[natti.nf]

yambejp様
早速のご回答ありがとうございました。
js-cookieを調べてHEADを変えました。