For dynamic row with comment box, refer below code.
<div class="container">
<!-- Header Section -->
<div class="header-section">
<h2>Position KPI</h2>
<asp:Button ID="btnViewList" runat="server" CssClass="btn btn-dark" Text="View List" />
<div class="d-flex align-items-center" style="margin-left: 50px;">
<label class="me-2" style="font-size: 14px;">Add New:</label>
<a href="AddNewUser.aspx" class="btn btn-warning text-white fw-bold" data-bs-toggle="modal" data-bs-target="#addKPIModal" style="width: 43px; height: 43px; gap: 0px; background-color: #EDAF26;">
<img src="img/vector.png" alt="Delete" style="width: 22.75px; height: 22.75px; margin-left: -1.5px; margin-right: 2px" />
</a>
</div>
</div>
<!-- Filters Section -->
<div class="filters-section">
<asp:DropDownList ID="ddlDepartment" runat="server" CssClass="dropdown">
<asp:ListItem Text="Department" Selected="True" />
</asp:DropDownList>
<asp:DropDownList ID="ddlPosition" runat="server" CssClass="dropdown">
<asp:ListItem Text="Position" Selected="True" />
</asp:DropDownList>
<asp:DropDownList ID="ddlLocation" runat="server" CssClass="dropdown">
<asp:ListItem Text="Location" Selected="True" />
</asp:DropDownList>
<asp:TextBox ID="txtYear" runat="server" CssClass="datepicker" Placeholder="Section Date/ Year"></asp:TextBox>
<asp:DropDownList ID="ddlStatus" runat="server" CssClass="dropdown">
<asp:ListItem Text="Status" Selected="True" />
</asp:DropDownList>
<div class="total-marks">
<span>Total Marks</span>
<span class="marks-box">100</span>
</div>
</div>
<!-- Content Section -->
<div class="content-section" id="kpiReportContainer">
<asp:Panel ID="pnlAddNewSection" runat="server" CssClass="add-section" data-bs-toggle="modal" data-bs-target="#addKPIModal">
<span>Add New Section</span>
</asp:Panel>
</div>
<!-- Dynamic Section -->
<div class="dynamic-section"></div>
<!-- Comment Section -->
<div class="comment-section" style="display: none">
<div style="float: left; width: 40%">
<asp:TextBox runat="server" class="datepicker" Style="width: 100%" />
</div>
<div style="float: right; width: 40%">
<asp:TextBox runat="server" class="datepicker" Style="width: 100%" />
</div>
</div>
</div>
<div class="modal fade" id="addKPIModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Add New KPI Section</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label class="mt-3">Add Assessment Indicator</label>
<div class="input-group">
<input type="text" id="assessmentIndicator" class="form-control" placeholder="Enter Indicator">
<input type="number" id="assessmentScore" class="form-control" placeholder="Score">
<span class="input-group-text">%</span>
</div>
<label class="mt-3">Add Assessment Indicator Attribute</label>
<div class="input-group">
<input type="text" id="attributeInput" class="form-control" placeholder="Enter Attribute">
<button type="button" class="btn btn-warning" id="addAttribute">+</button>
</div>
<div id="attributeList" class="mt-3"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-warning" id="saveKPI">Save</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("#addAttribute").click(function () {
var attr = $("#attributeInput").val().trim();
if (attr) {
$("#attributeList").append(`<div class='form-control mt-2'>${attr}</div>`);
$("#attributeInput").val("");
}
});
$("#saveKPI").click(function () {
var indicator = $("#assessmentIndicator").val().trim();
var score = $("#assessmentScore").val().trim();
var attributes = [];
$("#attributeList div").each(function () {
attributes.push($(this).text());
});
if (indicator && score && attributes.length) {
var kpiHtml = `
<div class="kpi-section">
<table class="kpi-table">
<thead>
<tr>
<th>${indicator}</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>Total (%)</th>
<th>Average</th>
</tr>
</thead>
<tbody>
${attributes.map(attr => `
<tr>
<td>${attr}</td>
${[...Array(5)].map(() => '<td><input type="checkbox" class="rating-checkbox"></td>').join('')}
<td class="total-percentage"></td>
<td class="average-score"></td>
</tr>`).join('')}
</tbody>
</table>
<button class="btn-remove" onclick="$(this).closest('.kpi-section').remove()">Delete</button>
</div>`;
$("#kpiReportContainer").append(kpiHtml);
$("#assessmentIndicator, #assessmentScore, #attributeInput").val("");
$("#attributeList").html("");
$("#addKPIModal").modal("hide");
$(".comment-section").show();
} else {
alert("Please fill all fields.");
}
});
});
$(document).ready(function () {
function toggleAddNewSection() {
if ($(".section-container").children().length > 0) {
$(".add-new-section-placeholder").hide();
} else {
$(".add-new-section-placeholder").show();
}
}
// Initial check on page load
toggleAddNewSection();
// Call this function after adding a new section dynamically
$(document).on("click", ".add-section-btn", function () {
$(".dynamic-section").append('<div class="section">New Section</div>');
toggleAddNewSection();
});
// Call this function after deleting a section dynamically
$(document).on("click", ".delete-section-btn", function () {
$(this).closest(".section").remove();
toggleAddNewSection();
});
});
</script>
The screenshot link which you shared made use of some library like Bootstrap Admin Template.
For more details on implementing the template refer below links.
https://coreui.io/product/free-bootstrap-admin-template/
https://startbootstrap.com/theme/sb-admin-2
