SO-20313581

by Tushar Gupta

HTML

<p>Search for
    <input name="" type="text" />
    <input name="addcriteria" class="add" type="button" value="Add Criteria" />
</p>
<ul class="criteriallist"></ul>

JavaScript

$("input[name='addcriteria']").on('click', function () {
	    var currentrow = $('.criteriallist').children().length + 1; //Get which row you're in 
	    var newrow = "<li>Where <select name='fieldname" + currentrow + "' class='fieldname'></select>";
	    newrow += " is <select name='paperSession' class='options'></select><input class='deletebtn' name='delete" + currentrow + "'  type='button' value='Delete Row'/></li>";
	    $(".criteriallist").append(newrow);
	    var newoptions = "<option value='ISARYear'>ISAR Year</option>";
	    newoptions += "<option value='PaperSession'>Paper Session</option>";
	    newoptions += "<option value='ResearchMethod'>Research Method</option>"
	    newoptions += "<option value='LvlAnalysis'>Level of Analysis</option>";
	    newoptions += "<option value='Motivation'>Motivation</option>";
	    newoptions += "<option value='NoofHypotheses'>Number of Hypotheses</option>";
	    newoptions += "<option value='IndepVariable'>Independent Variables</option>";
	    newoptions += "<option value='DepVariables'>Dependent Variables</option>";
	    newoptions += "<option value='TheoryUsed'>Theory Used</option>";
	    newoptions += "<option value='Contributions'>Contributions</option>";
	    $("select[name=fieldname" + currentrow + "]").html(newoptions);
	});

	//Remove line from DOM and rename all elements
	$(document).on('click', '.deletebtn', function () {
	    //alert("Delete button pressed");
	    var getbtnname = $(this).attr("name");
	    getbtnname = getbtnname.replace("delete", "");
	    //alert(getbtnname);
	    getbtnname = getbtnname - 1
	    //Remove Li list		
	    $("ul.criteriallist li:eq(" + getbtnname + ")").remove();
	    $("ul.criteriallist li .fieldname").prop("name", function (index) {
	        return "fieldname" + ++index;
	    });
	});