Dynamic License with State

dynamically add/remove license. Get current license value and place in first input group and replace license value with json string

by Amy Ruddy

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container py-3">
<label for="License" class="form-label"><b>#License</b> (value='123abc')</label>
  <input type="text" id="License" value='123abc' class="form-control" />
  <div id="buildlicenseform" class="my-3 d-none">
    <div class="legend">Real Estate License</div>
    <div class="input-group my-3 license_group attrEntry ">
      <div class="input-group-prepend">
        <select name="licState" class="form-control license_state" aria-label="License State">
          <option selected>State</option>
          <option value="AL">AL</option>
          <option value="AK">AK</option>
          <option value="AZ">AZ</option>
          <option value="AR">AR</option>
          <option value="CA">CA</option>
          <option value="CO">CO</option>
          <option value="CT">CT</option>
          <option value="DE">DE</option>
          <option value="DC">DC</option>
          <option value="FL">FL</option>
          <option value="GA">GA</option>
          <option value="HI">HI</option>
          <option value="ID">ID</option>
          <option value="IL">IL</option>
          <option value="IN">IN</option>
          <option value="IA">IA</option>
          <option value="KS">KS</option>
          <option value="KY">KY</option>
          <option value="LA">LA</option>
          <option value="ME">ME</option>
          <option value="MD">MD</option>
          <option value="MA">MA</option>
          <option value="MI">MI</option>
          <option value="MN">MN</option>
          <option value="MS">MS</option>
          <option value="MO">MO</option>
          <option value="MT">MT</option>
          <option value="NE">NE</option>
          <option value="NV">NV</option>
          <option value="NH">NH</option>
          <option...

SCSS

#buildlicenseform {
        border: 1px solid #222;
        padding: 0.5rem 1rem;
        border-radius: .25rem;
        margin-bottom: .5rem;

        .legend {
            font-size: .75rem;
            width: auto;
            margin-bottom: 0;
            position: absolute;
            transform: translate(2px, -16px);
            width: 119px;
            padding-left: 4px;
            background-color: #fff;
        }

       

        .input-group-append {
            margin-left: 0px;
        }

        select {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }

        input[type="text"] {
            flex: 1 1 auto;
            width: 1%;
            border-radius: 0;
        }

        button {
            border-radius: 0;
            border-bottom-right-radius: 0.25rem;
            border-top-right-radius: 0.25rem;
            border: 1px solid #ced4da;
            svg {
              margin-top: 8px;
              color: #607d8b;
              }
              &:hover {
                cursor: pointer;
              }
        }
    }

JavaScript

$(document).ready(function () {

    if ($('#License').length) {
        var licLimit = 3;
        var licVal = $('#License').val();
        var licLI = $('#License').closest('li');
        var regex = '[{';
        var licGroupObj = [];
        var arrState = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DC", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"]

        var licenseGroupHTML =
            '<div class="input-group my-3 license_group attrEntry">' +
            '<div class="input-group-prepend"><select name="licState" class="form-control license_state" aria-label="License State">' +
            createStateOptions() +
            '</select></div>' +
            '<input type="text" name="licNum" class="form-control license_input" placeholder="License Number" aria-label="License Number">' +
            '<button class=" input-group-append add_remove_license_button">' +
            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">' +
            '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z" />' +
            '</svg>' +
            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-circle-fill" viewBox="0 0 16 16">' +
            '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z" />' +
            '</svg>' +
            '</button>' +
            '</div>'

        function createStateOptions(selectedState) {
            var strOptions = '<option>State</option>';
            arrState.forEach(function (item) {
                if (item == selectedState) {
                    strOptions += '<option...