Dynamic Radio Buttons

Dynamically create radio buttons from input values.

by Amy Ruddy

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

   <div class="container mx-auto my-5" style="max-width: 700px;">
        <div class="text-center">
            <h1>My Radios</h1>
            <p>Get value from each input and create radio buttons. Mask the number passed</p>
        </div>

        <form>
            <div class="form-group">
              <label for="WorkPhone">Work Phone</label>
              <input type="email" class="form-control" id="WorkPhone" value="111111111">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">Home Phone</label>
                <input type="email" class="form-control" id="HomePHone" value="222222222">
              </div>
              <div class="form-group">
                <label for="exampleInputEmail1">Mobile Phone</label>
                <input type="email" class="form-control" id="MobilePhone" value="333333333">
              </div>
               <div class="form-group">
                <label for="exampleInputEmail1">MFA Phone</label>
                <input type="email" class="form-control" id="MobilePhone">
              </div>
          </form>
        <div id="radios"></div>
    </div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

var WorkPhone = $('#WorkPhone')[0];

var HomePhone = $('#HomePHone')[0];

var MobilePhone = $('#MobilePhone')[0];

console.log(MobilePhone);

var PhoneNumbers = [WorkPhone.value, HomePhone.value, MobilePhone.value];

console.log(PhoneNumbers);

for (var value of PhoneNumbers) {

    numberToPassToMFA = value;

    value = value.replace(/\d(?=\d{4})/g, "*")

    $('#radios')

    .append(`<input type="radio" id="${value}" name="number" value="${value}" class="custom-control-input">`)
    
    .append(`<label class="custom-control-label" for="${value}">${value}</label>`);
    
    console.log(value);

    console.log(numberToPassToMFA);

} 

$('#radios input').map(function(index){

    $(this).next().addBack().wrapAll('<div class="custom-control custom-radio" />');

});