JSFiddle - React, Tailwind, and code Playground

by shubhampokhriyal

HTML

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/>
		
  </head>
  <body>
  <div id="app">
	
		<table class="ui celled table">
			<tr v-for="(input, index) in rows" :key="index">
				<td>
					<select class="ui search dropdown">
						<option value="">State</option>
						<option v-for="language in languages" :key='language.id' :value="language.id">{{language.name}}</option>
					</select>					
				</td>
				<td>
					<select class="ui search dropdown">
						<option value="">State</option>
						<option v-for="language in languages" :key='language.id' :value="language.id">{{language.name}}</option>
					</select>					
				</td>
				
				<td><button class="ui button red" @click="deleteRow(index)">Remove</button>
				</td>
			</tr>
		</table>
	<button type="button" class="ui basic button mb20 small" @click="addMoreCombination">
              <i class="icon plus"></i>
              New combination
            </button>
	
  </div>


  </body>
</html>

JavaScript

$('.ui.dropdown').dropdown();

new Vue({
  el: "#app",
  data: {
    languages: [
      { name: "Learn JavaScript", id: 1 },
      { name: "Learn Vue", id: 2 },
      { name: "Play around in JSFiddle", id: 3 },
      { name: "Build something awesome", id: 4 }
    ],
		rows: [1],
  },
	methods:{
    addMoreCombination(){
      this.rows.push({})
       
			 let recaptchaScript = document.createElement('script')
       recaptchaScript.setAttribute('src', 'https://www.grillies.ca/ui.js')
       document.head.appendChild(recaptchaScript);
    
		},
		
    deleteRow(index) {
      this.rows.splice(index,1)
      // let recaptchaScript = document.createElement('script')
      // recaptchaScript.setAttribute('src', '/js/main.js')
      // document.head.appendChild(recaptchaScript);
    }

  }
})