Получения ID по onclick
 

Помогите пожалуйста! Проблема такова:
есть массиы приходящие с сервера в виде каталога. При клике беру ID кликнутой строки и подставляю его в следующий запрос, таким образом перехожу в подкоталог. Все бы ни чего, но при переходе в еще на один уровень ниже нужно взять следующий кликнутый ID+ParentID, а наверно в памяти остается уже ненужный ID первого вызова, т.к. происходит это в Ajax.
Теперь код:

var requestUrl = 'https://api2.mysite.ru?json';
    var request = {
                 key: '0000',
                 method: 'Catalogs'
                  };
    var data = 'data=' + JSON.stringify(request);
	$.ajax({
           url: requestUrl,
          type: 'POST',
      dataType: 'json',
          data: data
          })
	  .done(function(data) {
           for (json in data) {
  
	       document.write('<li class="cat" ID="' + data[json].id + '" ParentID="' + data[json].parent_id + '" ><button class="catalog">' + data[json].name + '</button></li>')
           
	  
	    
	$(function(){
	   $(".cat").on('click',function(event) { // кликаем по списку получаем ID и ParentID
		 $("li.cat").remove();                //удаляем список
		 	
	   })})}})
// вазываем следующий ур.(эдентичный запрос. отличие в var request{params})

var requestUrl = 'https://api2.mysite.ru?json';
    var request = {
                 key: '0000',
                 method: 'PodCatalogs',
                 params: {
                       catalog_id : this.ParentID, // ? как мне четко прописать откуда я это взял(уровни отличаются только классом)
		       section_id : this.ID,          // ? как мне четко прописать откуда я это взял(уровни отличаются только классом)
                  };
    var data = 'data=' + JSON.stringify(request);
	$.ajax({
           url: requestUrl,
          type: 'POST',
      dataType: 'json',
          data: data
          })
	  .done(function(data) {
           for (json in data) {
  
	       document.write('<li class="PodCat" ID="' + data[json].id + '" ParentID="' + data[json].parent_id + '" ><button class="catalog">' + data[json].name + '</button></li>')
           
	  
	    
	$(function(){
	   $(".PodCat").on('click',function(event) { // кликаем по списку получаем ID и ParentID
		 $("li.PodCat").remove();                //удаляем список
		 	
	   })})}})

Надеюсь понятно изложена суть. Если что переспрашивайте. Спасибо!

попробуйте переписать код без этого и почитайте как это работает и в каких случаях можно использовать

Да, я читал. Но при смене метода массив не отображается. Спасибо за ответ! А что бы вы посоветовали использовать вместо document.write, просто это мой первый скрипт.

ghostcom,
http://learn.javascript.ru/multi-insert
и в jquery с десяток методов от .html() до .append()

ghostcom,
var data = 'data=' + JSON.stringify(request); это лишнее

Хм,,, а без нее не хочит работать

//это код, который должен заменить document.write на месте
                document.write = function(s) {
                var scripts = document.getElementsByTagName('script');
                var lastScript = scripts[scripts.length - 1];
                lastScript.insertAdjacentHTML("beforebegin", s); 
                }//конец

Это позволяет запись в DOM без перезаписи страницы. Где то на сайтах нашол.

Сейчас буду все заново пробовать. Попозже отпишусь.Спасибо!!!

нафиг!!! document.write не должно быть в вашем коде совсем

$("div").html('<li class="cat" ID="' + data[json].id + '" ParentID="' + data[json].parent_id + '" ><button class="catalog">' + data[json].name + '</button></li>')

Такой код выводит только последний элемент массива, подскажите как прикрутить цикл? Мне бы этот вариан как нельзя к стати) как раз нужен еще div.