将值绑定到 jquery 中动态生成的 div

我有 3 个按钮，即期间、午餐和休息时间。当我单击这些按钮中的任何一个时，div id 会根据按钮单击动态生成。

我onclick为每个 3 个按钮编写了一个，并在单击事件中创建了动态 div。

对于第一次单击按钮周期，它会创建一个新的 div，并计算周期开始时间和结束时间，并将这些值绑定到动态创建的 div。

但我的问题是，如果我再次单击同一个按钮，则会生成新的 div，但该值没有绑定，而是覆盖了第一个 div。如何将数据绑定到生成的 div。

<button id="btn-period">PERIOD</button>
<button id="btn-lunch">LUNCH</button>
<button id="btn-break">BREAK</button>
<div id="period-container"> 
</div>

    $("#btn-period").click(function(){
        var periodTime = localStorage.getItem("totalMins");
        var f=periodTime.split(".");
        var perHour = f[0]; //total minuts after split

        $("#period-container").append('<div class="period-div"><div class="row"><div class="col-md-4"><span id="perid-text">PERIOD</span></div><div class="col-md-4"><span id="perid-stime"></span></div><div class="col-md-4"><span  id="perid-etime"></span></div></div></div>')
        var endt = $("#hdVal").text();//fetching endtime of prayer
        var funOutput=calculate(endt,perHour);//test for end time of prayer 
    });
    $("#btn-lunch").click(function(){
    var lunchTime = localStorage.getItem("lunch");
    $("#period-container").append('<div class="lunch-div" style="background-color: #5bc0de; color: #fff; box-shadow: 1px 1px 2px grey; padding: 10px; margin-top: 10px;margin-bottom: 10px;"><div class="row"><div class="col-md-4"><span id="perid-text">LUNCH</span></div><div class="col-md-4"><span id="perid-stime"></span></div><div class="col-md-4"><span  id="perid-etime"></span></div></div></div>')
  });
    $("#btn-break").click(function(){
    var breakTime = localStorage.getItem("breakduration");


    $("#period-container").append('<div id="" style="background-color: #f0ad4e; color: #fff;    box-shadow: 1px 1px 2px grey;padding: 10px;margin-top: 10px;margin-bottom: 10px;"><div class="row"><div class="col-md-4"><span id="perid-text">BREAK</span></div><div class="col-md-4"><span id="perid-stimes"></span></div><div class="col-md-4"><span  id="perid-etime"></span></div></div></div>')

});

function calculate(endTimes,perHour)
{
    alert("dsd");
    $("#perid-stime").html(endTimes);
    var d=endTimes.split(":");
    var min= (+d[0]) * 60  + (+d[1]);
    var few=parseInt(min) + parseInt(perHour);
    var num = few;
    var hours = (num / 60);
    var rhours = Math.floor(hours);
    var minutes = (hours - rhours) * 60;
    var rminutes = Math.round(minutes);
    $("#perid-etime").html(rhours +" : "+ rminutes);
    $("#hdVal").text(rhours +" : "+ rminutes);

}

目前我只在期间调用计算函数，但我想为其余的 2 个按钮单击调用相同的函数。