Rules In Update Page

[Master]

I have an update page with couple sections. I am using Rules to hide sections based on value I select from a dropdown. When I change the number of the sections to show less the data in hidden sections are not getting deleted. How Can I remove the data for hidden sections?

[MayMusic]

Let's say you have 4 sections and a dropdown with value from 1 to 4. In each section you have make, model and year . QTY is the dropdown field.

 

Begining of each section add a HTML Block and use this code:

<table id="section1">

at the end of each section add another HTML Block and use this code:

</table>

next section should have a section2 ID and ...

 

In the footer of the page use this code:

<script>

function hidesection(){
var qty = document.getElementById('EditRecordQTY').value;

if (qty == "1"){

  document.getElementById('section1').style.display = "inline";
document.getElementById('section2').style.display = "none";
  document.getElementById('section3').style.display = "none";
  document.getElementById('section4').style.display = "none";

}

else if (qty == "2"){

     document.getElementById('section1').style.display = "inline";
   document.getElementById('section2').style.display = "inline";
  
 document.getElementById('section3').style.display = "none";
  document.getElementById('section4').style.display = "none";
}

else if (qty == "3"){

   document.getElementById('section1').style.display = "inline";
     document.getElementById('section3').style.display = "inline";
  document.getElementById('section2').style.display = "inline";
  document.getElementById('section4').style.display = "none";
  
  }

else if (qty == "4"){
   document.getElementById('section1').style.display = "inline";
     document.getElementById('section3').style.display = "inline";
  document.getElementById('section2').style.display = "inline";
  document.getElementById('section4').style.display = "inline";

}
}

function clearform(){
var qty = document.getElementById('EditRecordQTY').value;
if (qty == "1"){
document.getElementById('EditRecordmake3').value = " ";
 document.getElementById('EditRecordmake2').value= " ";
 document.getElementById('EditRecordmake4').value= " ";
 document.getElementById('EditRecordmodel2').value= " ";
 document.getElementById('EditRecordmodel3').value= " ";
 document.getElementById('EditRecordmodel4').value= " ";
 document.getElementById('EditRecordyear2').value= " ";
 document.getElementById('EditRecordyear3').value= " ";
 document.getElementById('EditRecordyear4').value= " ";
 }
else if (qty == "2"){
document.getElementById('EditRecordmake3').value = " ";
  document.getElementById('EditRecordmake4').value= " ";
  document.getElementById('EditRecordmodel3').value= " ";
  document.getElementById('EditRecordmodel4').value= " ";
  document.getElementById('EditRecordyear3').value= " ";
  document.getElementById('EditRecordyear4').value= " ";
  }
  else if (qty == "3"){
  document.getElementById('EditRecordmake4').value= " ";
  document.getElementById('EditRecordmodel4').value= " ";
    document.getElementById('EditRecordyear4').value= " ";
}
}
document.getElementById('caspioform').onsubmit = clearform;
document.getElementById('EditRecordQTY').onchange = hidesection; 
document.getElementById('caspioform').onload = setTimeout(hidesection, 1000);
</script>

[MayMusic]

Anybody knows how we can do it with jquery using less lines?