Add html input elements before the previous input elements

Question

I have the following setup (you can run the code snippet if you expand):

*, *::before, *::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#bendPointBlock {
    width: 752px;
    margin-top: 25px;
    border: 1px solid #4285F4;
    font-size: 0px;
}
.colTitle {
    display:inline-block;
    width: 125px;
    height: 30px;
    background: #4285F4;
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-size: 14px;
}

.colData {
    display:inline-block;
    width: 125px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #000;
    font-size: 14px;
    border: 0px;
    border-right: 1px solid #BBB;
}

.colDataBorder {
    display:block;
    width: 770px;
    border-bottom: 1px solid #BBB;
}

.rowButton {
    display: inline-block;
    width: 35px;
    height: 35px;
    font-size: 30px;
    color: #FFF;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    margin-top: 5px;
}

.addRow {
    background: #3CBC3C;
    margin-left: 678px;
}

.addRow:hover {
    background: #46C646;
}

.addRow:active {
    background: #149414;
}

<div id="block">
  <span class="colTitle">Type</span>
  <span class="colTitle">Number</span>
  <span class="colTitle">X</span>
  <span class="colTitle">Y</span>
  <span class="colTitle">Z</span>
  <span class="colTitle">Last</span>
  <form action="" id="formId">
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_1" class="colData">
    <input type="text" name="rowX_1" class="colData">
    <input type="text" name="rowY_1" class="colData">
    <input type="text" name="rowZ_1" class="colData">
    <input type="text" name="type_2" class="colData">
    <span class="colDataBorder"></span>
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_2" class="colData">
    <input type="text" name="rowX_2" class="colData">
    <input type="text" name="rowY_2" class="colData">
    <input type="text" name="rowZ_2" class="colData">
    <input type="text" name="type_2" class="colData">
    <span class="colDataBorder"></span>
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_3" class="colData lastRow">
    <input type="text" name="rowX_3" class="colData lastRow">
    <input type="text" name="rowY_3" class="colData lastRow">
    <input type="text" name="rowZ_3" class="colData lastRow">
    <input type="text" name="type_2" class="colData lastRow">
    <span class="colDataBorder"></span>
  </form>
</div>
<span class="addRow rowButton">+</span>

What I am trying to accomplish, is every time I click the add button I append another row of all inputs (as shown in the code snippets) before the last row.

I have started the following:

<script>
    $(".addRow").click(function (){
        //propogate a row before the current last row
        //I have the following but unsure of how to add before the last row
        /*$("#formId").append("<input type="text" name="type" class="colData">
                               <input type="text" name="rowNum_#" class="colData">
                               <input type="text" name="rowX_#" class="colData">
                               <input type="text" name="rowY_#" class="colData">
                               <input type="text" name="rowZ_#" class="colData">
                               <input type="text" name="type_#" class="colData">");*/
    });
</script>

Any help is much appreciated!

Answer 1

You need to find the :last colDataBorder span the use .after(). Also note: In example I have used \ multiple line string variable

$(".addRow").click(function (){
    //propogate a row before the current last row
    //I have the following but unsure of how to add before the last row
    $("#formId span.colDataBorder:last").after('<input type="text" name="type" class="colData"> \
                           <input type="text" name="rowNum_#" class="colData">\
                           <input type="text" name="rowX_#" class="colData">\
                           <input type="text" name="rowY_#" class="colData">\
                           <input type="text" name="rowZ_#" class="colData">\
                           <input type="text" name="type_#" class="colData">\
                           <span class="colDataBorder"></span>\
                        ');
});

 $(".addRow").click(function (){
        //propogate a row before the current last row
        //I have the following but unsure of how to add before the last row
        $("#formId span.colDataBorder:last").after('<input type="text" name="type" class="colData"> \
                               <input type="text" name="rowNum_#" class="colData">\
                               <input type="text" name="rowX_#" class="colData">\
                               <input type="text" name="rowY_#" class="colData">\
                               <input type="text" name="rowZ_#" class="colData">\
                               <input type="text" name="type_#" class="colData">\
                               <span class="colDataBorder"></span>\
                            ');
    });

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#bendPointBlock {
  width: 752px;
  margin-top: 25px;
  border: 1px solid #4285F4;
  font-size: 0px;
}
.colTitle {
  display: inline-block;
  width: 125px;
  height: 30px;
  background: #4285F4;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
}
.colData {
  display: inline-block;
  width: 125px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #000;
  font-size: 14px;
  border: 0px;
  border-right: 1px solid #BBB;
}
.colDataBorder {
  display: block;
  width: 770px;
  border-bottom: 1px solid #BBB;
}
.rowButton {
  display: inline-block;
  width: 35px;
  height: 35px;
  font-size: 30px;
  color: #FFF;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  margin-top: 5px;
}
.addRow {
  background: #3CBC3C;
  margin-left: 678px;
}
.addRow:hover {
  background: #46C646;
}
.addRow:active {
  background: #149414;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block">
  <span class="colTitle">Type</span>
  <span class="colTitle">Number</span>
  <span class="colTitle">X</span>
  <span class="colTitle">Y</span>
  <span class="colTitle">Z</span>
  <span class="colTitle">Last</span>
  <form action="" id="formId">
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_1" class="colData">
    <input type="text" name="rowX_1" class="colData">
    <input type="text" name="rowY_1" class="colData">
    <input type="text" name="rowZ_1" class="colData">
    <input type="text" name="type_2" class="colData">
    <span class="colDataBorder"></span>
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_2" class="colData">
    <input type="text" name="rowX_2" class="colData">
    <input type="text" name="rowY_2" class="colData">
    <input type="text" name="rowZ_2" class="colData">
    <input type="text" name="type_2" class="colData">
    <span class="colDataBorder"></span>
    <input type="text" name="type" class="colData">
    <input type="text" name="rowNum_3" class="colData lastRow">
    <input type="text" name="rowX_3" class="colData lastRow">
    <input type="text" name="rowY_3" class="colData lastRow">
    <input type="text" name="rowZ_3" class="colData lastRow">
    <input type="text" name="type_2" class="colData lastRow">
    <span class="colDataBorder"></span>
  </form>
</div>
<span class="addRow rowButton">+</span>