JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div id="an_productfields" class="an_productfields">
    <input type="hidden" name="an_productfields" value="1">
        <h3 class="page-heading"> Onze extra services  <span data-toggle="modal" data-target="#serviceModal" href="#" id="spanInfo">
        <i class="fas fa-info-circle"></i>
        </span>
    </h3>
                <div id="an_productfields_1_id" class="form-group text">
                <div class="clearfix">
                        <div class="col-lg-8 col-xs-12 col-sm-4 service-col">
                <span class="service-pack-name">
                    <div style="display:inline-flex;line-height:1.1;">
                    <h3>Basis servicepakket</h3>
                    <span class="text-center" style="margin-left: 5px"><span class="free-service">(Gratis)</span>
                    </span></div>
                    <p>O.a. Thuis afgeleverd | Garantie afhandeling | Onderhoud en reparatie service</p>
                </span>
            </div>
            <div class="col-lg-4 col-xs-12 col-sm-8 service-col">
                <div class="radio-inline an_radio" style="display: inline-block;"> <label class="top" style="min-width: 7px">
                    <input type="checkbox" name="an_productfields_1[]" id="an_productfields_1_0" value="Basis servicepakket" class="Basis servicepakket" data-price="0" data-pricemain="0">
                    <span>
                      <b>voeg toe</b>
                       <i class="fas fa-shopping-cart"></i>
                    </span>
                   
                    </label>
                </div>
            </div>
                    </div>
            </div>
            <div id="an_productfields_2_id" class="form-group text">
                <div class="clearfix">
                        <div class="col-lg-8 col-xs-12 col-sm-4 service-col">
                <span class="service-pack-name">
                    <div style="display:inline-flex;line-height:1.1;">
                    <h3>Extra servicepakket</h3>
  ...

CSS

.an_radio input:checked + span i::before {
  position: relative;
  
}
.an_radio input + span b{
  font-weight:normal
}
.an_radio input:checked + span b{display:none;}
.an_radio input:checked + span:before {
  content: "toegevoegd";
  visibility: visible;
}
.an_radio input:checked + span i:before{
  content: "\f00c" !important;
  visibility: visible;
}
.an_radio input:checked + span {
  position: absolute;
  visibility: hidden;
}