JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="form-group custom-container" id="urlInputs">
<label asp-for="ItemOptionDTO.ItemPicturesWithOptionDTO" class="control-label custom-container-child"></label>
<input asp-for="ItemOptionDTO.ItemPicturesWithOptionDTO" class="form-control custom-container-child" />
<button id="addRow" class="button btn-primary custom-container-child" type="button">
Add URL
</button>
</div>
CSS
.custom-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.custom-container-child {
width: 100%;
display: inline-block;
}
.form-control.custom-container-child{
width: 50%;
display: inline-block;
}
.btn-primary.custom-container-child{
width: 50%;
display: inline-block;
}
JavaScript
var counter = 0;
$(function () {
$('#addRow').click(function () {
$('<input id="inputrow' + counter + '" class="form-control custom-container-child" id="ItemOptionDTO.ItemPicturesWithOptionDTO" name="ItemOptionDTO.ItemPicturesWithOptionDTO" type="text">'
+ '<button id="input-row-button' + counter + '" type="button" class="btn btn-primary custom-container-child" onclick="removeRow(' + counter + ');">Delete</button>').appendTo('#urlInputs');
counter++;
return false;
});
});
function removeRow(index) {
if (counter > 0) {
$('#inputrow' + index).remove();
$('#input-row-button' + index).remove();
counter--;
}
return false;
}