Providing some context for my page:
The section I have always contains a single input field. Below that, there is an "add" button which generates additional input fields. Since only one field is required on the screen, the following fields come with a "delete" button to remove the corresponding input field.
Check out this screenshot:
On the screenshot, you can see that the buttons with "-" are positioned after each input box. I need them to be aligned just to the right. I've attempted using display:inline on the "-"/delete button without success.
Sample Code:
function addField(count) {
if (count<=4){
count++;
var id = "tag"+count;
var newField = document.createElement("input");
newField.setAttribute('type', 'text');
newField.setAttribute('class', 'field');
newField.setAttribute('id', id);
var place = document.getElementById("tags");
inputContainer.appendChild(newField);
var removeId = "remove"+count;
var remove = document.createElement("input");
remove.setAttribute("type", "button");
remove.setAttribute("value", "-");
remove.setAttribute('class', 'remove');
remove.setAttribute('id', removeId);
remove.onclick = function () {
var targetInput = document.getElementById(id);
var targetRemove = document.getElementById(removeId);
targetInput.remove();
targetRemove.remove();
};
inputContainer.appendChild(remove);
return count;
}
}