Add Card on Click

user_6246159 0
Viewed 72

I'm trying to dynamically add a row on the press of a button. However, due to my status as new to JS, I cannot seem to figure it out. If you notice in the demo below, nothing happens when you press the green button.This is likely a simple fix, but I just do not have the knowledge to do it. If you'd prefer to use it in CodePen, here is the link as well: CodePen Demo

$(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;
}

.Rectangle3 {
  position: absolute;
  width: 95px;
  height: 8px;
  left: 294px;
  top: 305px;
  background: #1d67ac;
  border-radius: 0px;
}

.Zander{
  position: absolute;
  width: 218px;
  height: 39px;
  left: 297px;
  top: 331px;
  align-self: flex-start;
  font-family: Arial;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
}

.Rectangle4 {
  position: absolute;
  width: 499px;
  height: 65px;
  left: 270px;
  top: 397px;

  background: #ffffff;
  border-radius: 0px;
}

.Pros {
  position: absolute;
  width: 34px;
  height: 24px;
  left: 294px;
  top: 418px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */

  color: #41cc90;
}

.ButtonPro {
  position: absolute;
  width: 32px;
  height: 32px;
  left: 721px;
  top: 430px;

  background: #41cc90;
  border-radius: 4px;
}

.Group {
  align-self: flex-start;
  width: 17px;
  height: 17px;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 728.5px;
  top: 437px;

  .Vector {
    position: absolute;
    width: 17px;
    height: 17px;
    left: 728.5px;
    top: 422px;

    background: #ffffff;
  }
}

.Rectangle6 {
  position: absolute;
  width: 500px;
  height: 65px;
  left: 769px;
  top: 397px;

  background: #ffffff;
  border-radius: 0px;
}

.Rectangle_1 {
  position: absolute;
  width: 3px;
  height: 65px;
  left: 766px;
  top: 397px;

  background: #f2f4f5;
}

.Cons {
  position: absolute;
  width: 38px;
  height: 24px;
  left: 794px;
  top: 418px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */

  color: #ff725c;
}

.ButtonCon {
  align-self: flex-start;
  width: 32px;
  height: 32px;
  background: #ff725c;
  border-radius: 4px;
  position: absolute;
  width: 32px;
  height: 32px;
  left: 1222px;
  top: 430px;
  background: #ff725c;
  border-radius: 4px;
}

.Group2 {
  align-self: flex-start;
  width: 17px;
  height: 17px;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 1229px;
  top: 437px;

  .Vector2 {
    position: absolute;
    width: 17px;
    height: 17px;
    left: 1230px;
    top: 422px;

    background: #ffffff;
  }
}

.RowPro {
  position: absolute;
  width: 496px;
  height: 75px;
  left: 270px;
  top: 479px;

  background: #ffffff;
  border-radius: 0px;
}

.GreenStripe {
  position: absolute;
  width: 95px;
  height: 8px;
  left: 294px;
  top: 495px;

  background: #41cc90;
  border-radius: 0px;
}

.InputPro {
  position:absolute;
  width: 48px;
  height: 24px;
  left: 294px;
  top: 512px;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #2C343D;
}

.RowCon {
  position: absolute;
  width: 496px;
  height: 75px;
  left: 769px;
  top: 479px;
  background: #FFFFFF;
  border-radius: 0px;
}

.RedStripe {
  position: absolute;
  width: 95px;
  height: 8px;
  left: 793px;
  top: 495px;
  background: #FF725C;
  border-radius: 0px;
}

.InputCon {

  position: absolute;
  width: 48px;
  height: 24px;
  left: 793px;
  top: 512px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
/* identical to box height, or 150% */


  color: #2C343D;
}
<p class="Rectangle"></p>
<p class="Rectangle2"></p>
<p class="Zander" contenteditable> Pro Con:</p>
<p class="Rectangle3"></p>
<p class="Rectangle4"></p>
<p class="Pros" contenteditable>Pros</p>

<button id="ButtonPro" class="ButtonPro"></button>

<div class="Group">
  <div class="Vector">
    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
    </svg>
  </div>
</div>

<p class="Rectangle6"></p>

<p class="Rectangle_1"></p>

<p class="Cons" contenteditable>Cons</p>

<button class="ButtonCon"></button>

<div class="Group2">
  <div class="Vector2">
    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
    </svg>
  </div>
</div>

<p class="RowPro"></p>
<p class="GreenStripe"></p>
<p class="InputPro" id="okay" contenteditable>Input</p>

<p class="Rectangle_2"></p>

<p class="RowCon"></p>

<p class="RedStripe"></p>

<p class="InputCon">Input</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

css html jquery javascript
2 Answers

Your code works (I think as intended), the problem is that it is not easy to press the button, because you have a div element on top. You just need to set pointer-events to none in that element. I have added css code for the Group class. Incidentally, you may want to set the other button to the same class (meaning change Group2 to 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;
}

.Rectangle3 {
  position: absolute;
  width: 95px;
  height: 8px;
  left: 294px;
  top: 305px;
  background: #1d67ac;
  border-radius: 0px;
}

.Zander{
  position: absolute;
  width: 218px;
  height: 39px;
  left: 297px;
  top: 331px;
  align-self: flex-start;
  font-family: Arial;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
}

.Rectangle4 {
  position: absolute;
  width: 499px;
  height: 65px;
  left: 270px;
  top: 397px;

  background: #ffffff;
  border-radius: 0px;
}

.Pros {
  position: absolute;
  width: 34px;
  height: 24px;
  left: 294px;
  top: 418px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */

  color: #41cc90;
}

.ButtonPro {
  position: absolute;
  width: 32px;
  height: 32px;
  left: 721px;
  top: 430px;

  background: #41cc90;
  border-radius: 4px;
}

.Group {
  align-self: flex-start;
  width: 17px;
  height: 17px;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 728.5px;
  top: 437px;

  .Vector {
    position: absolute;
    width: 17px;
    height: 17px;
    left: 728.5px;
    top: 422px;

    background: #ffffff;
  }
}

.Rectangle6 {
  position: absolute;
  width: 500px;
  height: 65px;
  left: 769px;
  top: 397px;

  background: #ffffff;
  border-radius: 0px;
}

.Rectangle_1 {
  position: absolute;
  width: 3px;
  height: 65px;
  left: 766px;
  top: 397px;

  background: #f2f4f5;
}

.Cons {
  position: absolute;
  width: 38px;
  height: 24px;
  left: 794px;
  top: 418px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */

  color: #ff725c;
}

.ButtonCon {
  align-self: flex-start;
  width: 32px;
  height: 32px;
  background: #ff725c;
  border-radius: 4px;
  position: absolute;
  width: 32px;
  height: 32px;
  left: 1222px;
  top: 430px;
  background: #ff725c;
  border-radius: 4px;
}

.Group2 {
  align-self: flex-start;
  width: 17px;
  height: 17px;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 1229px;
  top: 437px;

  .Vector2 {
    position: absolute;
    width: 17px;
    height: 17px;
    left: 1230px;
    top: 422px;

    background: #ffffff;
  }
}

.RowPro {
  position: absolute;
  width: 496px;
  height: 75px;
  left: 270px;
  top: 479px;

  background: #ffffff;
  border-radius: 0px;
}

.GreenStripe {
  position: absolute;
  width: 95px;
  height: 8px;
  left: 294px;
  top: 495px;

  background: #41cc90;
  border-radius: 0px;
}

.InputPro {
  position:absolute;
  width: 48px;
  height: 24px;
  left: 294px;
  top: 512px;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #2C343D;
}

.RowCon {
  position: absolute;
  width: 496px;
  height: 75px;
  left: 769px;
  top: 479px;
  background: #FFFFFF;
  border-radius: 0px;
}

.RedStripe {
  position: absolute;
  width: 95px;
  height: 8px;
  left: 793px;
  top: 495px;
  background: #FF725C;
  border-radius: 0px;
}

.InputCon {

  position: absolute;
  width: 48px;
  height: 24px;
  left: 793px;
  top: 512px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
/* identical to box height, or 150% */


  color: #2C343D;
}
<p class="Rectangle"></p>
<p class="Rectangle2"></p>
<p class="Zander" contenteditable> Pro Con:</p>
<p class="Rectangle3"></p>
<p class="Rectangle4"></p>
<p class="Pros" contenteditable>Pros</p>

<button id="ButtonPro" class="ButtonPro"></button>

<div class="Group">
  <div class="Vector">
    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
    </svg>
  </div>
</div>

<p class="Rectangle6"></p>

<p class="Rectangle_1"></p>

<p class="Cons" contenteditable>Cons</p>

<button class="ButtonCon"></button>

<div class="Group2">
  <div class="Vector2">
    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
    </svg>
  </div>
</div>

<p class="RowPro"></p>
<p class="GreenStripe"></p>
<p class="InputPro" id="okay" contenteditable>Input</p>

<p class="Rectangle_2"></p>

<p class="RowCon"></p>

<p class="RedStripe"></p>

<p class="InputCon">Input</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

EDIT after comment: If you do not need absolute positioning, the jQuery code is kept simple. In that setting, each card is relatively positioned in an absolutely positioned div (#okay). Notice that now .GreenStripe and .InputPro are inside .RowPro. I have kept the approximate layout, but you would need to tweak top and left 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;
}

.Rectangle3 {
  position: absolute;
  width: 95px;
  height: 8px;
  left: 294px;
  top: 305px;
  background: #1d67ac;
  border-radius: 0px;
}

.Zander{
  position: absolute;
  width: 218px;
  height: 39px;
  left: 297px;
  top: 331px;
  align-self: flex-start;
  font-family: Arial;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
}

.Rectangle4 {
  position: absolute;
  width: 499px;
  height: 65px;
  left: 270px;
  top: 397px;

  background: #ffffff;
  border-radius: 0px;
}

.Pros {
  position: absolute;
  width: 34px;
  height: 24px;
  left: 294px;
  top: 418px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */

  color: #41cc90;
}

.ButtonPro {
  position: absolute;
  width: 32px;
  height: 32px;
  left: 721px;
  top: 430px;

  background: #41cc90;
  border-radius: 4px;
}

.Group {
  align-self: flex-start;
  width: 17px;
  height: 17px;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 728.5px;
  top: 437px;

  .Vector {
    position: absolute;
    width: 17px;
    height: 17px;
    left: 728.5px;
    top: 422px;

    background: #ffffff;
  }
}

.Rectangle6 {
  position: absolute;
  width: 500px;
  height: 65px;
  left: 769px;
  top: 397px;

  background: #ffffff;
  border-radius: 0px;
}

.Rectangle_1 {
  position: absolute;
  width: 3px;
  height: 65px;
  left: 766px;
  top: 397px;

  background: #f2f4f5;
}

.Cons {
  position: absolute;
  width: 38px;
  height: 24px;
  left: 794px;
  top: 418px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */

  color: #ff725c;
}

.ButtonCon {
  align-self: flex-start;
  width: 32px;
  height: 32px;
  background: #ff725c;
  border-radius: 4px;
  position: absolute;
  width: 32px;
  height: 32px;
  left: 1222px;
  top: 430px;
  background: #ff725c;
  border-radius: 4px;
}

.Group2 {
  align-self: flex-start;
  width: 17px;
  height: 17px;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 1229px;
  top: 437px;

  .Vector2 {
    position: absolute;
    width: 17px;
    height: 17px;
    left: 1230px;
    top: 422px;

    background: #ffffff;
  }
}

.RowPro {
  width: 496px;
  height: 75px;
  margin-top: 16px;
  background: #ffffff;
  border-radius: 0px;
}

.GreenStripe {
  position: relative;
  width: 95px;
  height: 8px;
  top: 16px;
  left: 16px;
  background: #41cc90;
  border-radius: 0px;
}

.InputPro {
  width: 500px;
  height: 24px;
  position: relative;
  left: 16px;
  top: 33px;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #2C343D;
}

.RowCon {
  position: absolute;
  width: 496px;
  height: 75px;
  left: 769px;
  top: 479px;
  background: #FFFFFF;
  border-radius: 0px;
}

.RedStripe {
  position: absolute;
  width: 95px;
  height: 8px;
  left: 793px;
  top: 495px;
  background: #FF725C;
  border-radius: 0px;
}

.InputCon {

  position: absolute;
  width: 500px;
  height: 24px;
  left: 793px;
  top: 512px;

  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
/* identical to box height, or 150% */


  color: #2C343D;
}

#okay{
  position: absolute;
  width: 496px;
  height: 123px;
  left: 270px;
  top: 479px;
}
<p class="Rectangle"></p>
<p class="Rectangle2"></p>
<p class="Zander" contenteditable> Pro Con:</p>
<p class="Rectangle3"></p>
<p class="Rectangle4"></p>
<p class="Pros" contenteditable>Pros</p>

<button id="ButtonPro" class="ButtonPro"></button>

<div class="Group">
  <div class="Vector">
    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
    </svg>
  </div>
</div>

<p class="Rectangle6"></p>

<p class="Rectangle_1"></p>

<p class="Cons" contenteditable>Cons</p>

<button class="ButtonCon"></button>

<div class="Group2">
  <div class="Vector2">
    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
    </svg>
  </div>
</div>
<div id="okay">
<div class="RowPro"><div class="GreenStripe"></div><div class="InputPro" contenteditable>Input</div></div>
</div>
<p class="Rectangle_2"></p>

<p class="RowCon"></p>

<p class="RedStripe"></p>

<p class="InputCon">Input</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

user_95651390

Here's some guidance: try y = mx + b. That should give you a foundation to work off of.

user_142282750
Related