JSFiddle - React, Tailwind, and code Playground

by victorrseloy

HTML

<div id='metrics'>
<a onClick='addLine()' href='#'> Add </a>
</div>

JavaScript

let id = 0;
let $container;


const appendLine = id => `<div id='myDiv${id}'><input type='text'/>primary<input name='primary' selected type='radio'/><a href='#' onClick='remove("#myDiv${id}")'> Remove </a></div>`;


window.addLine = function(){
	$container.prepend(appendLine(id++));
}

window.remove = function(id){
	let target = $container.find(id);
	if(target.find("input[type='radio']").is(':checked')){
  	alert('you cannot delete a primary metric');
    return;
  }
  
  target.remove();
  
}

$(function(){
	$container = $('#metrics');
  addLine();
  $("input[type='radio']").attr('checked','checked')
})