Hide selected id with jQuery

Hide selected id with jQuery

Hello everyone, I am stuck at part where I click a button, next which id=getOffer it hides, the button id=gotOffer shows up. In this code I have 50 buttons as you can see.

If I delete these "+i" 's code works just for first button.

Can anyone help me please? Thanks
  2. <script type="text/javascript">

  4. if (window.XMLHttpRequest)
  5.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  6.   xmlhttp=new XMLHttpRequest();
  7.   }
  8. else
  9.   {// code for IE6, IE5
  10.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  11.   }
  12. xmlhttp.open("GET","xml/20121106.xml",false);
  13. xmlhttp.send();
  14. xmlDoc=xmlhttp.responseXML; 

  16. var x=xmlDoc.getElementsByTagName("promotion");

  18. for (i=1;i<(x.length=50);i++)
  19.   { 
  20.  

  22.   $("#getOffer"+"i").click(function () {
  23.  $("#getOffer"+"i").hide();
  24.  $("#gotOffer"+"i").show();
  25.   });
  26.   $("#gotOffer"+"i").click(function () {
  27.  $("#gotOffer"+"i").hide();
  28.  $("#getOffer"+"i").show();
  29.   });
  30.   
  31.   document.write("<div class='oneDeal'>");
  32.   document.write("<div class='imgDeal'>");
  33.   document.write(x[i].getElementsByTagName("PROGRAMURL")[0].childNodes[0].nodeValue);
  34.   document.write("</div><div class='nameDeal'>");
  35.   document.write(x[i].getElementsByTagName("DESCRIPTION")[0].childNodes[0].nodeValue);
  36.   document.write("</div><div class='linkDeal'>");
  37.   document.write("<input type='button' class='offer' id='getOffer"+i+"' value='Click for Code' onclick='click()'><input type='button' class='offer' id='gotOffer"+i+"' style='display:none' onclick='click()'>");
  38.   document.write("</div>");  
  39. document.write("</div>");


  42.   }  
  43. </script>