checkbox by checkbox by text - html

Question

<script type="text/javascript">
function ShowHideDiv(chkCat) {
var dvCat = document.getElementById("dvCat");
dvCat.style.display = chkCat.checked ? "block" : "none";
}
</script>
<label for="chkCat">
<input type="checkbox" id="chkCat" onclick="ShowHideDiv(this)" /> Cat
</label>
<div id="dvCat" style="display: none">
<label>
<input type="checkbox" id="dvCat" onclick="ShowHideDiv(this)" /> British shorthair
</label>
<label>
<p id="British shorthair" ></p>
</label>
<script>
document.getElementById("dvCat").addEventListener("click", function(){
document.getElementById("British shorthair").innerHTML = "RM00";
});
</script>
<label>
<input type="checkbox" id="chkCat" onclick="ShowHideDiv(this)" /> Exotic Shorthair
</label>
<p id="Exotic Shorthair"></p>
<script>
document.getElementById("dvCat").addEventListener("click", function(){
document.getElementById("Exotic Shorthair").innerHTML = "RM00";
});
</script>
1 checkbox. Under this another 2 options checkbox. Select one of the two checkbox the output of both these options came out simultaneously. Try to run this coding. Can you fix my coding?

Answer 1

You can fix it for now by assigning unique ID to checkboxes.
<script type="text/javascript">
function ShowHideDiv(chkCat) {
var dvCat = document.getElementById("dvCat");
dvCat.style.display = chkCat.checked ? "block" : "none";
}
</script>
<label for="chkCat">
<input type="checkbox" id="chkCat" onclick="ShowHideDiv(this)" /> Cat
</label>
<div id="dvCat" style="display: none">
<label>
<input type="checkbox" id="dvSubCat" /> British shorthair
</label>
<label>
<p id="British shorthair" ></p>
</label>
<script>
document.getElementById("dvSubCat").addEventListener("click", function(){
document.getElementById("British shorthair").innerHTML = "RM00";
});
</script>
<label>
<input type="checkbox" id="chkSubCat" /> Exotic Shorthair
</label>
<p id="Exotic Shorthair"></p>
<script>
document.getElementById("chkSubCat").addEventListener("click", function(){
document.getElementById("Exotic Shorthair").innerHTML = "RM00";
});
</script>
P.S: Assigning id is not the ultimate solution, if you have more than 1 checkbox falling in same criteria use class names instead