尝试从文本输入值中获得克隆，以便在使用localStorage刷新后保留

Question

我正在制作一个日光浴床应用程序，每个方框表示2个日光浴床，我双击方框并更改背景颜色，每个颜色表示日光浴床的实际情况，但localstorage只适用于我的原始项目，而不适用于我的克隆。我需要保存我所有的克隆形式输入文本和背景的变化，我怎么能得到它workfile: https://codepen.io/Kawasaki93/pen/NWyJdVx

<input type="text"  style="height:17px" id="qty" name="qty" size="3"  name="formulario" value="">



document.addEventListener("DOMContentLoaded", function() {
document.getElementById("qty").onkeyup = store;
document.getElementById("qty").onload = getValue();
});

//store value after changes
function store(){
var text = document.getElementById("qty").value;
localStorage.setItem("qty",text);
}
//local storage to keep values after refresh
function getValue(){
var storedText = localStorage.getItem("qty");
alert(storedText);
if(storedText != null){
document.getElementById("qty").value = storedText; 
}
else
document.getElementById("qty").value = 0;
}

Answer 1

尝试下面的代码一次，这里是一个可行的例子。

let variable1;
for (var x=1;x<96 ;x++)
{
$(".beach_wrapper").append($(".sunbed").first().clone(
).attr("id","clon_"+x));
$("#clon_1,#clon_2" ).attr('style', 'background:orange;');
$("#clon_10,#clon_11,#clon_22,#clon_23,#clon_34,#clon_35,#clon_46,#clon_47,#clon_58,#clon_59,#clon_70,#clon_71").attr('style','background:honeydew;');
}
$('.toggle').dblclick(function () {  let step = $(this).data('actual-step') || 1;
$(this).addClass('step'+ step);
$(this).data('actual-step', step + 1 );
});
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("qty").onload = getValue();
});
var localStorageArr = {};
$("input.sunbed").keyup(function(){
var text = $(this).val();
var inpId = $(this).attr('id');
localStorage.setItem(inpId, text);
});
//local storage to keep values after refresh
function getValue(){
$( "input.sunbed" ).each(function( index ) {
var inpID = $(this).attr('id');
$(this).val(localStorage.getItem(inpID));
});
}

.beach_wrapper {
width: 1170px;
max-width: 100%; 
display: grid;
grid-template-columns: 100px 100px 120px 100px 100px 100px 100px 100px 100px 100px 100px 100px ;
grid-template-rows: 90px 90px 90px 90px 90px 110px 100px 90px;
gap: 0px 0px;  

transform:scale(70%);
margin-left: auto;
margin-right: auto;
padding-right: 10px;
padding-left: 10px; 
}
body { 

display: flex;
align-items: center ;
height: 100vh;

background:honeydew;
}


.sunbed {
width: 70px;
height: 40px;
border: 2px solid;
color: orange;
border-color: black;
background: green;
text-align: center;
display:inline-block;
font-family: sans-serif;
margin-left:12px;
margin-top:15px;

}
.sunbed.step1 {
background:LightSeaGreen; 
/*ocupado*/
}
.sunbed.step2 {
background: red;
/*pagado*/
}
.sunbed.step3 {
background: linear-gradient(to left, LightSeaGreen 50%, DarkCyan 50%); 
/*ocupado con 3 hamacas cada lado*/
}
.sunbed.step4 {
background:linear-gradient(to left, LightSeaGreen 50%, green 50%); 
/*ocupado 1 persona sola*/
}

.sunbed.step5{
background:orange;
/*hamaca off*/

}
.sunbed.step6{
background:green;
}
.sunbed.step7{
background:LightSeaGreen;
}
.sunbed.step8{
background:red;
}
.sunbed.step9{
background:linear-gradient(to left, LightSeaGreen 50%, DarkCyan 50%); 
/*ocupado con 3 hamacas cada lado*/
}
.sunbed.step10{
background:linear-gradient(to left, LightSeaGreen 50%, green 50%); 
/*ocupado 1 persona sola*/
}
.sunbed.step11{
background:green;
}
.form input{
background-color: #FFEFD5;
border: none;
border-bottom: 1px solid green;
text-align:center;
zoom: 100%;
touch-action: none; 
}

@media only screen and (min-width: 384px) and (max-width: 767px) { /* Your Styles... */ }







#clon_10,#clon_11,#clon_22,#clon_23,#clon_34,#clon_35,#clon_46,#clon_47,#clon_58,#clon_59,#clon_70,#clon_71{

border: 0px solid;

}
#clon_72,#clon_73,#clon_74,#clon_75,#clon_76,#clon_77,#clon_78,#clon_79,#clon_80,#clon_81,#clon_82,#clon_83,#clon_84,#clon_85,#clon_86,#clon_87,#clon_88,#clon_89,#clon_90,#clon_91,#clon_92,#clon_93,#clon_94,#clon_95{

width: 75px;
height: 45px;
border-radius: 30px;

}

.h1{
margin-top:-50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="beach_wrapper">
<div class="sunbedtoggle">
<input type="text"  style="height:17px" id="qty" name="qty" size="3" class="sunbed" name="formulario" value="">
</div>
</div>

https://codepen.io/maheshmthorat/pen/JjLPEox