JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input string optional"><label for="virksomhed_navn" class="string optional"> Navn</label><input type="text" size="50" name="virksomhed[navn]" maxlength="255" id="virksomhed_navn" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" type="button" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;" type="button">Remove</button>
    </div>

    <div class="input string optional"><label for="virksomhed_name" class="string optional">Name</label><input type="text" size="50" name="virksomhed[name]" maxlength="255" id="virksomhed_name" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;">Remove</button>
    </div>


    <div class="input string optional"><label for="virksomhed_pis" class="string optional">Pis</label><input type="text" size="50" name="virksomhed[v]" maxlength="255" id="virksomhed_pis" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;">Remove</button>
    </div>

CSS

#companyinfo button.remove {
    display: none;
}

fieldset#companyinfo  {
    border: 3px double silver;
    padding: 12px;
}
#companyinfo label {
    display: block;
}
#companyinfo .button-row {
    display: block;
    text-align:right;
    margin-top: 8px;
    width: 332px;
}
#companyinfo input {
    display: block;
    width: 320px;
    margin: 8px 0;
    padding: 4px;
    
}
#companyinfo .input {
    margin-bottom: 10px;
    border: 1px dotted white;
    padding: 10px;
    background-color:#B1D853;
    
    
}

JavaScript

function findLastInput ( element ) {
  return $( element ).parent().prev().find('input').last();
}

$('button.add').click ( function(e) {
    $(this).parent().find('button.remove').show();
    $(this).hide();

    var element = findLastInput(this).clone();
    var name = element.prop('name');
    var pattern = new RegExp(/\[(.*?)\]/);
    var info = name.match(pattern)[1];
    element.prop({
      'value': '',
      'name' : name.replace(pattern, '[' + info + 'info' + ']'),
      'id'   : element.prop('id') + 'info',
      'type' : 'input',
      'class' : 'infoinput'
    });    
    $(this).parent().append(element).append('<div class="redDiv colorDiv" style="background:red;width:20px;height:20px;"></div><div class="blueDiv colorDiv" style="background:blue;width:20px;height:20px;"> </div><div class="blackDiv colorDiv" style="background:black;width:20px;height:20px;"> </div>').find('.colorDiv').click(clickopa);
    
})
    
$('button.remove').click ( function(e) {
    $(this).parent().find('button.add').show();
    $(this).hide();
    //findLastInput(this).remove('input');
    $(this).parent().find("input").remove();

    $(this).parent().find('.colorDiv').remove();
});

function clickopa () {
  $(this).css("opacity", 1.0); //Just use this inside the function instead of wrapping it inside of another function
  $(this).parent().find('.colorDiv').not($(this)).css("opacity", 0.5); //Don't use fadeTo if you aren't animating
}
$('.blueDiv').css("opacity", 0.5)
$('.blackDiv').css("opacity", 0.5)
$('.blackDiv').click (clickopa);
$('.blueDiv').click (clickopa);
$('.redDiv').click (clickopa);