JSFiddle - React, Tailwind, and code Playground

HTML

<section id="step1-B">
 
        <div id="scroll" class="scrollable">

        <div class="wrap">
            <div class="breakpoint">
                <div id="to-add-first" class="outerDiv first">
                    <div class="clone">
                        <label><input type="text" value="Address"></label>
                        <label><input type="text" value="Address 2"></label>
                        <label><input type="text" value="Town"></label>
                        <label><input type="text" value="Contry"></label>
                        <label><input type="text" value="Post Code"></label>

                        <ul class="options tooltip">
                        <li class="delete"><a href="javascript:void(0);" title="Delete" class="tip">delete</a></li>
                        </ul>
                  </div>
                </div>
              </div>
         </div>
         </div>
        <a href="javascript:void(0);" id="add-address">Add new address</a>
        </section>

CSS

.browse{position: absolute;}
.next, .prev{position: absolute;color: #333; cursor: pointer;z-index: 100;}
.next{right:0px;top:46%;height:34px;width:18px;}
.prev{left:-24px;top:46%;height:34px;width:18px;}

.outerDiv input{width:152px;}
.inline label{width:152px;font-size:1.2em;font-weight:700;clear: left;float: left;padding-bottom:6px;}
.outerDiv #find-user-address{margin-top:22px;}
#found-user-address{margin-top:15px;clear:left;float: left;}
#found-user-address label{font-size:1.2em;font-weight:700;display:block;padding:0 0 6px 0;float:left;}
#found-user-address span{display:block;font-size:1.2em;padding:0 0 6px 0}

.first{position:relative;margin-right:28px;text-indent:0;border:1px solid #d2d0c5;min-height:167px;
-webkit-box-shadow:1px 1px 1px 0 #d2d0c5; -moz-box-shadow:1px 1px 1px 0 #d2d0c5; box-shadow:1px 1px 1px 0 #d2d0c5;padding:10px 20px;width: 176px;}

 .first #found-user-address    {margin-top:7px; float: left;}
.first #found-user-address label{display:block;padding:0 0 6px 0}
.first #found-user-address span{display:block;font-size:1.2em;padding:0 0 6px 0}

JavaScript

addAddress: function() {
    var cloneCount = 0;
    $copy = $("#scroll .first").first().clone().attr("id", "to-add-first_Clone" + cloneCount).addClass('cloned'); //add a new class cloned to the cloned outerDivs
    $(".clone", "#to-add-first_Clone" + cloneCount).attr("id", "clone_Clone" + cloneCount);
    cloneCount++;
    //check breakpoints
    var $last_bp = $('#scroll .wrap .breakpoint').last();
    var $first = $(".first", $last_bp).length;
    if ($first > 2) {
        //move this into a new breakpoint
        $('#scroll .wrap').append('<div class="breakpoint"/>');
        $last_bp = $('#scroll .wrap .breakpoint').last();
    }
    $last_bp.append($copy);
    this.drawNavigation();
},

deleteAddress: function(e) {
    $(e.target).parents(".first").remove();
    var allAddresses = $("#scroll .first").detach();
    $("#scroll .breakpoint").remove();
    var idx = 0;
    allAddresses.each(function() {
        if (idx % 3 == 0) $('#scroll .wrap').append('<div class="breakpoint"/>');
        $last_bp = $('#scroll .wrap .breakpoint').last();
        $last_bp.append($(this));
        idx += 1;
    })
    this.drawNavigation();
},

drawNavigation: function() {
    var numAddresses = $("#scroll .first").size();
    if (numAddresses > 1) $("#scroll .first li.delete").show()
    else $("#scroll .first li.delete").hide()
}