Your solution seems to work fine, but there's an issue with accessing the button due to a `div` element overlaying it. To fix this, simply add `pointer-events: none;` to the CSS of the `Group` class. Also, consider changing the other button to use the same class by replacing `Group2` with `Group`:
$(document).ready(function(){
$("#ButtonPro").click(function(){
$("#okay").append("<p class=RowPro></p> <p class=GreenStripe></p> <p class=InputPro contenteditable>Input</p>");
});
});
.Rectangle {
align-self: flex-start;
width: 1539px;
height: 1268px;
background: #f2f4f5;
}
.Rectangle2 {
align-self: flex-start;
width: 1000px;
height: 105px;
background: #ffffff;
position: absolute;
width: 1000px;
height: 105px;
left: 270px;
top: 280px;
}
.Group{
pointer-events: none;
}
<!-- Rest of the CSS code remains unchanged -->
After reading your comment:
If you don't require absolute positioning, you can simplify the jQuery code. In such cases, each card is relatively positioned within an absolutely positioned div (`#okay`). For this change, ensure that `.GreenStripe` and `.InputPro` are placed inside `.RowPro`. The layout is kept similar for reference, but adjustments to `top` and `left` may be needed for `GreenStripe` and `InputPro`:
$(document).ready(function(){
$("#ButtonPro").click(function(){
$("#okay").append("<div class='RowPro'><div class='GreenStripe'></div><div class='InputPro' contenteditable>Input</div></div>");
});
});
.Rectangle {
align-self: flex-start;
width: 1539px;
height: 1268px;
background: #f2f4f5;
}
.Rectangle2 {
align-self: flex-start;
width: 1000px;
height: 105px;
background: #ffffff;
position: absolute;
width: 1000px;
height: 105px;
left: 270px;
top: 280px;
}
.Group{
pointer-events: none;
}
<!-- Remaining CSS styles stay the same -->