モーダルウィンドウをテンプレートごとに使いまわしたい　

前提

ここに質問の内容を詳しく書いてください。
（例）
djangoでシステムを作っています。
テンプレート別で様々なモーダルウィンドウを出す処理があります。

実現したいこと

外部JS内にもーだうウィンドウを出す処理を書いて、
テンプレート事に呼び出して呼び出す処理を再利用したいです。

発生している問題・エラーメッセージ

一つのテンプレートからはモーダルウィンドウを呼び出せるのですが、
別のテンプレートから呼び出そうとしても反応しません。

該当のソースコード

html
1{% comment %} サインアップテンプレートのモーダルウィンドウ {% endcomment %}
2<input class="modal-open" value="新規登録">
3{% comment %} 日記画面テンプレートのモーダルウィンドウ {% endcomment %}
4<input class="modal-open" value="投稿する">
5
6{% comment %} サインアップ、日記共通 {% endcomment %}
7<div class="modal-container">
8        <div class="modal-body">
9          <div class="modal-content">
10            この内容でよろしいですか？
11            <br><br>
12            <center>
13              <input type="submit" value="はい">
14            </form>
15              <br><br>
16              <a class="modal-close">いいえ</a>
17            </center>
18          </div>
19        </div>
20      </div>
21

javascript
1$(function(){
2  // 変数に要素を入れる
3  var open = $('.modal-open'),
4    close = $('.modal-close'),
5    container = $('.modal-container');
6    
7  //開くボタンをクリックしたらモーダルを表示する
8  open.on('click',function(){
9          container.addClass('active');
10      return false;
11  });
12
13  //モーダルの外側をクリックしたらモーダルを閉じる
14  $(document).on('click',function(e) {
15    if(!$(e.target).closest('.modal-body').length) {
16      container.removeClass('active');
17    }
18  });
19  close.on('click',function(){
20      container.removeClass('active');
21  })
22});