Обработчики событий
 

Доброго времени суток!
Друзья, помогите новичку разобраться. Вопрос такой: через циклы на страницу добавляются 2 набора кнопок. Не могу понять как идентифицировать конкретную кнопку из набора. Тоесть, как добавить обработчики событий для каждой из кнопок? Смысл в том, чтобы, к примеру, при нажатии на любую из кнопок первого набора она оборачивалась в тэг div, а при нажатии на любую кнопку из второго набора - в тэг pre. Извините за сумбурность. Заранее спасибо.

function addNewButts1() {
				var i=1;
				while (i<=5) {
				createNewButt1();
				i++;
				}
			}
			
			function addNewButts2() {
				var i=1;
				while (i<=5) {
				createNewButt2();
				i++;
				}
			}
						
			function createNewButt1() {
				var parent = document.getElementsByTagName('body')[0];
				var newButt1 = document.createElement('input');
				newButt1.type = 'button';
				newButt1.value = 'Change Button';
				newButt1.id = 'butt1';
				parent.appendChild(newButt1);
			}
			
			function createNewButt2() {
				var parent = document.getElementsByTagName('body')[0];
				var newButt2 = document.createElement('input');
				newButt2.type = 'button';
				newButt2.value = 'Wrap Button';
				newButt2.id = 'butt2';
				parent.appendChild(newButt2);
			}

ты ведь создаешь элементы с одинаковым id!Это против правил
newButt1.id = 'butt1';.
Можно как вариант такое

function createNewButt2(j) {
              
                newButt2.id = 'butt2'+j;
               
            }


function addNewButts1() {
	                var i=1;
	                while (i<=5) {
	                createNewButt1(i);
	                i++;
	                }

вот тебе часть рулона

<script>
function handler(e){
div1=document.createElement('div')
div1.appendChild(this)
document.body.appendChild(div1)
//this.parentNode.removeChild(this)
}
function handler2(e){
alert('2')	
}

function addNewButts1() {
                var i=1;
                while (i<=5) {
                createNewButt1(i);
                i++;
                }
            }
             
            function addNewButts2() {
                var i=1;
                while (i<=5) {
                createNewButt2(i);
                i++;
                }
            }
                         
            function createNewButt1(i) {
                var parent = document.getElementsByTagName('body')[0];
                var newButt1 = document.createElement('input');
                newButt1.type = 'button';
                newButt1.value = 'Change Button';
              newButt1.id = 'butt1'+i;
                parent.appendChild(newButt1);
            }
             
            function createNewButt2(j) {
                var parent = document.getElementsByTagName('body')[0];
                var newButt2 = document.createElement('input');
                newButt2.type = 'button';
                newButt2.value = 'Wrap Button';
                newButt2.id = 'butt2'+j;
                parent.appendChild(newButt2);
            }
			addNewButts1()
			addNewButts2()
			reg1=/butt1/
			reg2=/butt2/
			inputs=document.getElementsByTagName('input')
			
			
			
eventType = document.addEventListener ? ["addEventListener", ""] : ["attachEvent", "on"];
			
			
			for(k=0;k<inputs.length;k++){
				if(reg2.test(inputs[k].getAttribute('id'))){
				//inputs[k].addEventListener('click',handler,false)
				inputs[k][ eventType[ 0 ] ]( eventType[ 1 ] + "click", function( e ){
        e = e || window.event;
        handler.call( e.target || e.srcElement, e );
    }, false );
				}else{
					
					inputs[k][ eventType[ 0 ] ]( eventType[ 1 ] + "click", function( e ){
        e = e || window.event;
        handler2.call( e.target || e.srcElement, e );
    }, false );
				}
			}
			
			
</script>

.Не могу удалить кнопку

На мой взгляд, группу кнопок лучше сразу помещать в блок (div, span,...), хотя бы для того, чтобы на него, при необходимости, повесить один обработчик (а не на все элементы по обработчику).
Кнопки также можно добавлять строкой в innerHTML.

Думаю из этого примера можно понять о чём речь.

<style>
  pre {background: green} /*когда обернётся фон станет зелёным*/
</style>

<input type="button" value="+"  onclick="create('pre wrap', 5, 'pre')">

<script>
function create (name, amount, wrapping) {
  //добавляем новый блок 
  var newDiv = document.createElement('div');
  document.body.appendChild(newDiv);

  //назначаем ему обработчик
  newDiv.onclick = function () {
    newDiv.innerHTML = '<' + wrapping + '>' + newDiv.innerHTML + '</' + wrapping + '>'; 
    alert(newDiv.innerHTML); //для посмотра, что получилось
  };

  //добавляем кнопки в блок
  var  str = '<input type="button" value="' + name + '" >';

  for (var i = 0; i < amount; i++) {
    newDiv.innerHTML += str;
  }

}
</script>

Да и наверное innerHTML лучше в цикле не гонять.

<style>
  pre {background: green} /*когда обернётся, фон станет зелёным*/
</style>

<input type="button" value="+"  onclick="create('pre wrap', 5, 'pre')">

<script>
function create (name, amount, wrapping) {
  //добавляем новый блок 
  var newDiv = document.createElement('div');
  document.body.appendChild(newDiv);

  //назначаем ему обработчик
  newDiv.onclick = function () {
    newDiv.innerHTML = '<' + wrapping + '>' + newDiv.innerHTML + '</' + wrapping + '>'; 
    alert(newDiv.innerHTML); //для посмотра, что получилось
  };

  //добавляем кнопки в блок
  var  butStr = '<input type="button" value="' + name + '" >';
  var str = '';

  for (var i = 0; i < amount; i++) {
    str += butStr;
  }

  newDiv.innerHTML = str;

}
</script>