JavasprictでクリックイベントinnerHTMLで中身を変更した内容を使って更にクリックイベントにて変更させたい

実現したいこと

javasprictのクリックイベントinnnerHTMLにてdiv要素内を変更した後、更に変更された要素を使ってクリックイベントを使用したいが上手くイベントが発生できなくて困っています。

該当のソースコード(HTML)

<div class="change1">
  変更する要素
</div>

<button class="button1">クリック</button>

該当のソースコード(js)

//クリックイベントinnerHTMLにてdiv内を変更
var button1 = document.querySelector('.button1');
button1.addEventListener('click',function(){

      var change1 = document.querySelector('.change1');
      change1.innerHTML ='<div class="change2">変更した要素</div><br><button class="button2">クリック</button>';

   }); 

//変更されたdiv要素をクリックイベントinnerHTMLを使って更にdiv内を変更
var button2 = document.querySelector('.button2');
button2.addEventListener('click',function(){

      var change2 = document.querySelector('.change2');
      change2.innerHTML = '<div>更に変更</div>';

   });

試したこと

divやbuttonタグを変更してみたり、jsファイルをイベントごとに分けたりしてみたが変更されませんでした。

補足情報（FW/ツールのバージョンなど）

FWなどは使用していません。
全てテキストエディタ(Atom)にべた書きしています。
一回目のクリックイベントinnerHTMLでは変更されます。
(<div class="change1">から<div class="change2">への変更は成功しています。)

行動規範の内容に同意します

回答2件

こういうこと？

Diff
1//クリックイベントinnerHTMLにてdiv内を変更
2var button1 = document.querySelector('.button1');
3button1.addEventListener('click',function(){
4
5      var change1 = document.querySelector('.change1');
6      change1.innerHTML ='<div class="change2">変更した要素</div><br><button class="button2">クリック</button>';
7
8-   }); 
9
10//変更されたdiv要素をクリックイベントinnerHTMLを使って更にdiv内を変更
11var button2 = document.querySelector('.button2');
12button2.addEventListener('click',function(){
13
14      var change2 = document.querySelector('.change2');
15      change2.innerHTML = '<div>更に変更</div>';
16
17   });
18+ });