【質問】ハイブリッドアプリの同じ画面内で、複数の同機能を持つボタンを配置したい

現在、cordovaを用いてハイブリッドアプリの開発を行っております。
その際、同じ画面の中でカメラアプリを起動するボタンを２つ置いたところ
先に設置されているボタンでしか起動しないという事象が発生しております。

こうした事象は頻繁にあるものなのでしょうか？
自分としてはどちらのボタンでもアプリが起動するようにしたいと考えております。

よい解決方法をご存知の方がいらっしゃれば、ご協力をお願いいたします。

HTML上でボタンを配置している箇所の記述

 <div class="button-container-c">
 <button id="take_pictures" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored ">
<i class="material-icons mdl-color-text--white">camera_enhance</i>
</button>
</div>

カメラを起動させるjsファイルの内容

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        var button = document.getElementById("take_pictures");
        button.addEventListener("click", takePictures);
    }
};