Dynamically assign property name to object

Question

Basically in the code below there is a for loop which makes 10 elements and when I clicked the button it console.logs the following:

Current console.log:

Object {objectProperty: "0"} Object {objectProperty: "1"} Object {objectProperty: "2"} Object {objectProperty: "3"} Object {objectProperty: "4"} Object {objectProperty: "5"} Object {objectProperty: "6"} Object {objectProperty: "7"} Object {objectProperty: "8"} Object {objectProperty: "9"}

However I want the object property name to be the value of the <span>, so when I loop through the elements it will assign a new property name which would be the same as the <span> value.

So the console.log should look something like this if it was working:

Object {0: "0"} Object {1: "1"} Object {2: "2"} Object {3: "3"} Object {4: "4"} Object {5: "5"} Object {6: "6"} Object {7: "7"} Object {8: "8"} Object {9: "9"}

What I have so far:

  $(document).on('change', "select[id*='checkBox']", function(e) {
    // Disable or Enable input fields
    if (($("option:selected", this).text() === "No")) {
      $(this).next().next().attr('readonly', true).addClass('input-disabled');
    } else {
      $(this).next().next().attr('readonly', false).removeClass('input-disabled');
    }
  });

  $(document).on('click', "#generateButton", function(e) {

    // Define associative arrays that will compose licence object
    var Signed = new Object();
    var NotSigned = new Object();
    var Licence = new Object();

    // On generate button click, get all values to dynamically create signed and unsigned values
    $('.list-group-item').each(function(key, value) 
    {
     
      var objectProperty = $(this)[0].children[1].innerHTML;
      Signed.objectProperty = $(this)[0].children[2].value;
      console.log(Signed);
    });   
  });


  // Append list-groups on page so that configuration elements can be appended
  $("#optionalFieldsRow").children().find('.panel-body').append("<div class='row'><div class='col-sm-6 left'><ul class='list-group'></ul></div><div class='col-sm-6 right'><ul class='list-group'></ul></div></div>");

  // Loop through configuration items and display element on page
  for (var i = 0; i < 10; i++) {
    $("#optionalFieldsRow").children().find('.left').find('.list-group').append("<li class='list-group-item'><select id='checkBox" + i + "' class='optionalFieldsRowCheckBox' name='checkBox" + i + "'><option>Yes</option><option>No</option></select><span class='optionalLabel'>" + i + "</span><input id='input" + i + "' type='text' value='" + i + "' name='input" + i + "'></li>");
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="page-wrapper">
  <div class="row">
    <div class="col-lg-12">
      <ul class="list-group">

          <!-- /.panel-body -->
          <div class="pull-right">
            <button name="Save configuration button" id="generateButton" class="btn btn-primary">Generate .properties</button>
            <!--<button name="Save configuration button" onclick="GenerateLicence(this);" id="generateButton" class="btn btn-primary">Generate .properties</button>-->
          </div>
      </ul>
    </div>
    <!-- /.col-lg-12 -->
  </div>

  <div id="optionalFieldsRow" class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <!-- /.panel-heading -->
        <div class="panel-body">
          <!-- Optional fields for licences -->
          <div class="row">

            <!-- /.row -->
          </div>
        </div>
        <!-- /.panel -->
      </div>
      <!-- /.col-lg-8 -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /#page-wrapper -->
</div>

Answer 1

var obj = {};
obj["<new property name>"] = <new property value>;