cssd-back/resources/js/vue/views/NotWorking/AddNewTest.vue

<template>
  <v-container fluid>
    <material-card class=""
      color="black"
      title="Add a New Test"
    >
    <v-layout wrap class="ma-2">
      <v-flex xs12 md3 sm3>
        <v-text-field
        class="pa-2"
        label="Test Name"
        color="black">
        </v-text-field>
      </v-flex>
      <v-flex xs12 md3 sm3>
        <v-text-field
        class="pa-2"
        label="Unique ID"
        color="black">
        </v-text-field>
      </v-flex>
    </v-layout>
    <v-layout wrap class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative">
      <v-layout wrap class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Relative WM-Color-LightGrey">
        <v-flex xs12 md3 sm3>
          <v-text-field
          class="pa-2"
          label="Input Name"
          color="black">
          </v-text-field>
        </v-flex>
        <v-flex xs12 md2 sm2>
          <v-select
            class="pa-2"
            v-model="select"
            :hint="`${select.state}, ${select.abbr}`"
            :items="items"
            item-text="state"
            item-value="abbr"
            label="Type"
            return-object
            single-line
            color="black"
          ></v-select>
        </v-flex>
        <v-flex xs12 md2 sm2>
          <v-select
            class="pa-2"
            v-model="select"
            :hint="`${select.state}, ${select.abbr}`"
            :items="items"
            item-text="state"
            item-value="abbr"
            label="Size"
            return-object
            single-line
            color="black"
          ></v-select>
        </v-flex>
        <v-flex xs12 md5 sm5>
          <v-text-field
          class="pa-2"
          label="Value"
          color="black">
          </v-text-field>
        </v-flex>
      </v-layout>
      <v-layout v-for="(Div, Key) in ArrayDiv" wrap :key="Key" class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Relative WM-Color-LightGrey Form">
        <v-flex xs12 md3 sm3>
          <v-text-field
          class="pa-2"
          label="Input Name"
          color="black">
          </v-text-field>
        </v-flex>
        <v-flex xs12 md2 sm2>
          <v-select
            class="pa-2"
            v-model="select"
            :hint="`${select.state}, ${select.abbr}`"
            :items="items"
            item-text="state"
            item-value="abbr"
            label="Type"
            return-object
            single-line
            color="black"
          ></v-select>
        </v-flex>
        <v-flex xs12 md2 sm2>
          <v-select
            class="pa-2"
            v-model="select"
            :hint="`${select.state}, ${select.abbr}`"
            :items="items"
            item-text="state"
            item-value="abbr"
            label="Size"
            return-object
            single-line
            color="black"
          ></v-select>
        </v-flex>
        <v-flex xs12 md5 sm5>
          <v-text-field
          class="pa-2"
          label="Value"
          color="black">
          </v-text-field>
        </v-flex>
        <v-btn
        absolute
        small
        right
        top
        color="pink"
        @click="Remove()"
        id="RemoveFormBuilder"
        >
        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
        REMOVE</v-btn>
      </v-layout>
        <v-btn
        absolute
        small
        right
        bottom
        color="cyan"
        @click="Duplicator"
        id="FormBuilder"
        >
        <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
        ADD</v-btn>
    </v-layout>
    <div id="WM-FormBuilder"></div>
    <v-flex class="text-xs-center" xs12 md12 sm12 >
      <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
        <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
        <span class="white--text">Add</span>
      </v-btn>
    </v-flex>
    </material-card>
  </v-container>
</template>

<script>
  export default {
    data () {
      return {
        ArrayDiv : [],
        select: { state: 'Florida', abbr: 'FL' },
        items: [
          { state: 'Florida', abbr: 'FL' },
          { state: 'Georgia', abbr: 'GA' },
          { state: 'Nebraska', abbr: 'NE' },
          { state: 'California', abbr: 'CA' },
          { state: 'New York', abbr: 'NY' }
        ]
      }
    },
    methods : {
      Duplicator () {
       var Forms = document.getElementsByClassName('Form');
       var ArrayForm = [];

       for(var i=0; i<Forms.length; i++) {
         ArrayForm.push(Forms[i]);
       }
       this.ArrayDiv.push(ArrayForm);
     },
      Remove () {
        var ID = document.getElementById('RemoveFormBuilder');
        var Element = ID.parentNode;
        Element.remove();
      }
    }
  }
</script>
<style lang="css" scoped>
.WM-Border {
    border: 1px solid;
}
.WM-Border-Black {
  border-color: #2f353b !important;
}
.WM-Border-Gray {
  border-color: #aaa !important;
}
.WM-Color-LightGrey {
  background-color : #F5F5F5;
}
.WM-Relative {
    position: relative;
}
.v-btn--top.v-btn--absolute.v-btn--small {
    top: -25px !important;
}
</style>