how to looping a card? (with all element in the card) - php

Question

I want to ask some question about looping a card.. (https://ibb.co/WpxghNg) when I loop the card, the card can loop while the elements in it can't. all elements don't work, can't switch on / off.
when I loop the card, the card can loop while the elements in it can't. all elements don't work, can't switch on / off.
this is sql farm_node (https://ibb.co/S304TyQ)
elseif($_POST['p']=="show_node"){
$sn=$_POST['sn'];
$q=mysqli_query($link, "SELECT node from farm_node WHERE SN=\"$sn\"");
while($d = mysqli_fetch_row($q)){
$node[]=$d[0];
}
$daftar=array('node'=>$node);
echo json_encode($daftar);
}
$("#newval").change(function() {
sn = $("option:selected").attr('sn');
namafarm = $("option:selected").val();
isi = $("#show_siram2");
if (namafarm == "1") {
console.log("value 1")
console.log(sn)
$("#bungkus_siram").empty();
$("#show_hidro").show();
} else {
console.log("value 2")
console.log(sn)
$("#show_hidro").hide();
$("#bungkus_siram").empty();
$.ajax({
method: "POST",
url: "../inc/olah.php",
data: {
p: "show_node",
'sn': sn,
},
dataType: "json"
})
.done(function(d) {
var html = '<div class="card mx-auto" style="width:350px" >';
html += '<div class="card-body">';
html += '<form id="form_node" >';
html += '<div class="custom-control custom-switch" style="margin-left:60px;">';
html += '<input type="checkbox" class="custom-control-input" id="pompa">';
html += '<label class="custom-control-label" for="pompa">Pompa</label>';
html += '</div>';
html += '</form>';
html += '<h5 class="card-title"></h5>';
html += '<button type="submit" name="nama"class="data-farm btn btn-success btn-sm" id="farm">Set Node</button>';
html += '</div>';
html += '</div>';
jml = d.node.length;
var isi = $("#form");
var node = d.node;
for (var i = 0; i < jml; i++)
//$("#form").show();
{
isi = $("#show_siram2");
$("#field").append(html);
$('#field #field .custom-control .custom-switch:eq(' + i + ')').val(node[i]);
$('#field .card-title:eq(' + i + ')').append(node[i]);
$("#field .data-farm:eq(" + i + ")").val(node[i]);
console.log(node[i]);
}
})
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group ">
<label for="serial-number">Serial Number:</label>
<select class="serial-number form-control" name="serial-number" class="custom-select mb-3" id="newval">
<option>Serial Number</option>
<?php
$q=mysqli_query($link,"SELECT produk.SN, produk.nama, produk.produk FROM produk LEFT JOIN farm ON produk.SN=farm.SN WHERE username=\"$_SESSION[username]\"");
while($d=mysqli_fetch_row($q)) {
echo "<option value=$d[2] sn=$d[0]>$d[1]</option>";
}
?>
</select>
</div>
<div class="form-group" id="field">
<div class="row" id="bungkus_siram" style="display:block">
<div class="card" id="show_siram1">
<div class="card-body">
<h5 class="card-title">Node X</h5>
<form id="form_node">
<div class="custom-control custom-switch" style="margin-left:80px;">
<input type="checkbox" class="custom-control-input" id="pompa">
<label class="custom-control-label" for="pompa">Pompa</label>
</div>
<label for="k_max">Kelembapan Maksimum</label>
<input type="range" class="custom-range" id="k_max" name="k_max">
<label for="k_min">Kelembapan Minimum</label>
<input type="range" class="custom-range" id="k_min" name="k_min">
<button type="submit" name="nama" class="data-farm btn btn-success btn-sm" id="farm">Set Node</button>
</div>
<div class="form-group">
<button type="submit" id="save_addPlant" class="btn btn-primary btn-success">Save</button>
<button type="button" class="btn btn-outline-danger pull-left" data-dismiss="modal">Close</button>
</div>
</form>
</div>
<div class="card" id="show_siram2">
<div class="card-body">
<h5 class="card-title">Node X</h5>
<form id="form_node">
<div class="custom-control custom-switch" style="margin-left:60px;">
<input type="checkbox" class="custom-control-input" id="pompa">
<label class="custom-control-label" for="pompa">Pompa</label>
</div>
<label for="k_max">Kelembapan Maksimum</label>
<input type="range" class="custom-range" id="k_max" name="k_max">
<label for="k_min">Kelembapan Minimum</label>
<input type="range" class="custom-range" id="k_min" name="k_min">
<button type="submit" name="nama" class="data-farm btn btn-success btn-sm" id="farm">Set Node</button>
</div>
<div class="form-group">
<button type="submit" id="save_addPlant" class="btn btn-primary btn-success">Save</button>
<button type="button" class="btn btn-outline-danger pull-left" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
I want the looping card and its contents as much as possible.

Answer 1

What do you mean by --- the card can loop while the elements in it can't. all elements don't work, can't switch on / off.
Do you mean nothings showing up anything on the browser?
because I noticed that, on your parent div. it has style like this
<div class="row" id="bungkus_siram" style="display:none">
maybe you change the style to- display:block
to show?
Im guessing.