Create new line of dynamically populated content from button

Adamhumbug · January 9, 2020

Hi,

I have a table row that has a dropdown and two textboxes in it.

I would like to use a button that allows me to add another row beneath the existing row. It cannot be added to the bottom of the table as there is further content beneath.

The content of the dropdown comes from a database query.

The dropdown on the new row should have the selection in the first row greyed out.

I expect this will need to be a js function but i dont really know where to start with it being dynamic content.

This is the table as it stands if this provides clarity of my intentions - picture below

					echo "<form method='post' id='staffOrderForm'>";
							$stmt->close();
										echo "<table id='staffOrderTable' class='table table-striped table-bordered mt-3 text-center'>";
						foreach($daterange as $date){
														
									echo"
										<tr>
											<th class='table-dark' colspan='3'>".$date->format("l - jS F Y")."</th>
										</tr>
										<tr>
											<th class='' colspan='3'>Management	</th>
										</tr>
										<tr>
											<th class='col-4'>Name</th>
											<th class='col-4'>Start Time</th>
											<th class='col-4'>End Time</th>
										</tr>
										<tr>
											<td>
												<select class='custom-select managerSelect'>";
												$managerRoleId = 1;
												$stmt = $conn->prepare("
												 	SELECT user_firstname, user_lastname, user_id
												    FROM ssm_user
												    WHERE user_role_id = ? ");
												$stmt->bind_param("i", $managerRoleId);
												$stmt->execute();
												$stmt->store_result();
												$stmt->bind_result($ufn, $uln, $uid);
												while($stmt->fetch()){echo "<option>".$ufn." ".$uln."</option>";};
												echo"</select>
											</td>
											<td><input class='form-control' type='' name=''></td>
											<td><input class='form-control' type='' name=''></td>
										</tr>
										<tr>
											<th colspan='3'>Chefs</th>
										<tr/>
										<tr>
											<th class='col-4'>Name</th>
											<th class='col-4'>Start Time</th>
											<th class='col-4'>End Time</th>
										</tr>
										<tr>
											<td>
												<select class='custom-select chefSelect'>";
													$chefRoleId = 2;
													$stmt = $conn->prepare("
												 	SELECT user_firstname, user_lastname, user_id
												    FROM ssm_user
												    WHERE user_role_id = ? ");
													$stmt->bind_param("i", $chefRoleId);
													$stmt->execute();
													$stmt->store_result();
													$stmt->bind_result($ufn, $uln, $uid);
													while($stmt->fetch()){echo "<option>".$ufn." ".$uln."</option>";};
												echo"</select>
											</td>
											<td><input class='form-control' type='' name=''></td>
											<td><input class='form-control' type='' name=''></td>
										</tr>";
						}
						echo "</table></form>";

I appreciate that i will likely have to add a button with an onclick but from there i am pretty lost.

As always i appreciate the help provided.

Barand · January 9, 2020

You will need JS, definitely, and maybe ajax.

One approach is to make each management and chefs section a separate <tbody>..</tbody> section. That way you have something you can append to.

Psycho · January 9, 2020

You don't have to do this with JavaScript - although it would provide a better user experience. In fact, I think it is beneficial to build such functionality w/o JS to start and then add JS. But, I am unclear from your goal as to whether you are wanting to add management and chef rows independently or complete sections with both a management and chef line (or something else). Also, using a framework like JQuery is always a good idea.

EDIT: I just noticed none of your input fields have names. Are you intending for the user to submit the form once filled out and do something with that data? I would assume so and in that case the naming of the fields is important if you are going to be dynamically adding fields.

Edited January 9, 2020 by Psycho

Barand · January 10, 2020

Here's my solution using jQuery/ajax. You can add multiple new rows to each section. Each time a row is added those staff already allocated are disabled in the new row's menu.

<?php
const HOST     = 'localhost';                                                                  #
const USERNAME = '????';                                                                       #
const PASSWORD = '????';                                                                       #
const DATABASE = '????';                                                                       #     These lines would
                                                                                               #
function pdoConnect($dbname=DATABASE)                                                          #     normally be in
{                                                                                              #
    $db = new PDO("mysql:host=".HOST.";dbname=$dbname;charset=utf8",USERNAME,PASSWORD);        #     an included file
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);                              #
    $db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);                         #
    $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);                                      #
    $db->setAttribute(PDO::MYSQL_ATTR_LOCAL_INFILE, true);                                     #
    return $db;                                                                                #
}                                                                                              #

$db = pdoConnect('humbug');

//
// HANDLE AJAX REQUESTS
//
if (isset($_GET['ajax'])) {
    
     exit(staffRow($db, $_GET['dt'], $_GET['role'], $_GET['used']));
}

//
//  HANDLE POST DATA
//
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    
    // This where you handle the schedule updates.
    // for now we just output the posted data to check all is OK
    echo 'Posted data<pre>';
    printf("%-15s%10s%10s%10s%10s\n\n", 'Date', 'Role', 'ID', 'Start', 'End');
    foreach ($_POST['form'] as $date => $ddata) {
        foreach ($ddata as $role => $rdata) {
            foreach ($rdata['staff'] as $k => $id) {
                $start = $rdata['starttime'][$k];
                $end = $rdata['endtime'][$k];
                printf("%-15s%10s%10s%10s%10s\n", $date, $role, $id, $start, $end);
            }
        }
    }
    echo '</pre>';
}

//
//  HANDLE GET DATA
//
$wkstart = $_GET['wkstart'] ?? date('Y-m-d');

$heads = ['Name', 'Start Time', 'End Time'];
$sections = [ 1 => 'Management', 
              2 => 'Chefs'
            ];
$daterange = new DatePeriod(new DateTime($wkstart), new DateInterval('P1D'), 6);

$tdata = '';
foreach ($daterange as $date) {
    $dthead = $date->format('l - jS F Y');
    $dt = $date->format('Y-m-d');
    $tdata .= "<tr><th colspan='3' class='w3-black w3-padding'>$dthead</th></tr>\n";
    
    foreach ($sections as $role => $rolename) {
        $tdata .= "\n<tbody id='$dt$role'>
                    <tr><th colspan='3' class='rolename'>$rolename
                    <a href='#' class='w3-right addrow' data-dt='$dt' data-role='$role'>Add row</a>
                    </th>
                    </tr><tr>";
        foreach ($heads as $h) {
            $tdata .= "<th>$h</th>";
        }
        $tdata .= "</tr>\n";
        $tdata .= staffRow($db, $dt, $role);
        $tdata .=  "\n</tbody>\n";
    }
}

function staffRow(PDO $db, $dt, $role, $used='')
{
    return "
           <tr><td>" . staffOptions($db, $dt, $role, $used) . "</td>
           <td><input type='time' name='form[$dt][$role][starttime][]' value='' class='w3-input w3-border'></td>
           <td><input type='time' name='form[$dt][$role][endtime][]' value='' class='w3-input w3-border'></td>
           </tr>\n";
}

function staffOptions(PDO $db, $dt, $role, $used='')
{
    $scheduled = explode(',', $used);
    $opts = "<select class='w3-input'  name='form[$dt][$role][staff][]'>
             <option  value=''> -- select staff name --</option>
            ";
    $res = $db->query("SELECT user_id
                            , firstname
                            , lastname
                       FROM ssm_user
                       WHERE role_id = $role     
                      ");
    foreach ($res as $r) {
        $dis = in_array($r['user_id'], $scheduled) ? 'disabled' : '';
        $opts .= "<option $dis value='{$r['user_id']}'>{$r['firstname']} {$r['lastname']}</option>\n";
    }
    return $opts; 
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Example Staff Schedule</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $().ready( function() {
        $(".addrow").click( function() {
            var dt = $(this).data('dt')
            var role = $(this).data('role')
            var sectionid = dt+role;
            var sect = $("#"+sectionid)
            var used = []
            $.each($(sect).find("select"), function(k,v) {
                if ($(v).val() != '') {
                    used.push( $(v).val() )
                }
            })
            if (used.length > 0) {
                $.get(
                    "",
                    {"ajax":1, "dt":dt, "role":role, "used": used.join(",")},
                    function (resp) {
                        $(sect).append(resp);
                    },
                    "TEXT"
                )
            }
        })
    })
</script>
<style type="text/css">
    body  { font-family: calibri, sans-serif; }
    table { border-collapse: collapse; font-size: 10pt; width: 90%; margin: 30px auto;}
    th,td { padding: 4px; width: 33%; background-color: #EEE; border: 1px solid #D0D0D0; }
    input[type='time']  { padding-right: 16px; text-align: center; }
    option:disabled { color: #F2D335; }
    .rolename { background-color: #D8D8D8; }
    .addrow   { text-decoration: none; background-color: #54BC54; border: 1px solid #000; padding:2px 8px; }
</style>
</head>
<body>
<header class="w3-container w3-black w3-padding">
    <h1>Example Staff Schedule</h1>
    <form method='GET'>
    <label>Week commencing </label>
    <input type='date' name='wkstart' value='<?=$wkstart?>'>
    <input type='submit' name='btnSub' value='Submit'>
    </form>
</header>
<form method='POST'>
<table border='1'>
    <?=$tdata?>
    <tr><td colspan='3' class="w3-center"><input type='submit' class="w3-button w3-blue" name='btnSub2' value='Update'></td></tr>
</table>
</form>
</body>
</html>

Edited January 10, 2020 by Barand

Adamhumbug · January 10, 2020

2 hours ago, Barand said:

Here's my solution using jQuery/ajax. You can add multiple new rows to each section. Each time a row is added those staff already allocated are disabled in the new row's menu.


<?php
const HOST     = 'localhost';                                                                  #
const USERNAME = '????';                                                                       #
const PASSWORD = '????';                                                                       #
const DATABASE = '????';                                                                       #     These lines would
                                                                                               #
function pdoConnect($dbname=DATABASE)                                                          #     normally be in
{                                                                                              #
    $db = new PDO("mysql:host=".HOST.";dbname=$dbname;charset=utf8",USERNAME,PASSWORD);        #     an included file
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);                              #
    $db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);                         #
    $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);                                      #
    $db->setAttribute(PDO::MYSQL_ATTR_LOCAL_INFILE, true);                                     #
    return $db;                                                                                #
}                                                                                              #

$db = pdoConnect('humbug');

//
// HANDLE AJAX REQUESTS
//
if (isset($_GET['ajax'])) {
    
     exit(staffRow($db, $_GET['dt'], $_GET['role'], $_GET['used']));
}

//
//  HANDLE POST DATA
//
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    
    // This where you handle the schedule updates.
    // for now we just output the posted data to check all is OK
    echo 'Posted data<pre>';
    printf("%-15s%10s%10s%10s%10s\n\n", 'Date', 'Role', 'ID', 'Start', 'End');
    foreach ($_POST['form'] as $date => $ddata) {
        foreach ($ddata as $role => $rdata) {
            foreach ($rdata['staff'] as $k => $id) {
                $start = $rdata['starttime'][$k];
                $end = $rdata['endtime'][$k];
                printf("%-15s%10s%10s%10s%10s\n", $date, $role, $id, $start, $end);
            }
        }
    }
    echo '</pre>';
}

//
//  HANDLE GET DATA
//
$wkstart = $_GET['wkstart'] ?? date('Y-m-d');

$heads = ['Name', 'Start Time', 'End Time'];
$sections = [ 1 => 'Management', 
              2 => 'Chefs'
            ];
$daterange = new DatePeriod(new DateTime($wkstart), new DateInterval('P1D'), 6);

$tdata = '';
foreach ($daterange as $date) {
    $dthead = $date->format('l - jS F Y');
    $dt = $date->format('Y-m-d');
    $tdata .= "<tr><th colspan='3' class='w3-black w3-padding'>$dthead</th></tr>\n";
    
    foreach ($sections as $role => $rolename) {
        $tdata .= "\n<tbody id='$dt$role'>
                    <tr><th colspan='3' class='rolename'>$rolename
                    <a href='#' class='w3-right addrow' data-dt='$dt' data-role='$role'>Add row</a>
                    </th>
                    </tr><tr>";
        foreach ($heads as $h) {
            $tdata .= "<th>$h</th>";
        }
        $tdata .= "</tr>\n";
        $tdata .= staffRow($db, $dt, $role);
        $tdata .=  "\n</tbody>\n";
    }
}

function staffRow(PDO $db, $dt, $role, $used='')
{
    return "
           <tr><td>" . staffOptions($db, $dt, $role, $used) . "</td>
           <td><input type='time' name='form[$dt][$role][starttime][]' value='' class='w3-input w3-border'></td>
           <td><input type='time' name='form[$dt][$role][endtime][]' value='' class='w3-input w3-border'></td>
           </tr>\n";
}

function staffOptions(PDO $db, $dt, $role, $used='')
{
    $scheduled = explode(',', $used);
    $opts = "<select class='w3-input'  name='form[$dt][$role][staff][]'>
             <option  value=''> -- select staff name --</option>
            ";
    $res = $db->query("SELECT user_id
                            , firstname
                            , lastname
                       FROM ssm_user
                       WHERE role_id = $role     
                      ");
    foreach ($res as $r) {
        $dis = in_array($r['user_id'], $scheduled) ? 'disabled' : '';
        $opts .= "<option $dis value='{$r['user_id']}'>{$r['firstname']} {$r['lastname']}</option>\n";
    }
    return $opts; 
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Example Staff Schedule</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $().ready( function() {
        $(".addrow").click( function() {
            var dt = $(this).data('dt')
            var role = $(this).data('role')
            var sectionid = dt+role;
            var sect = $("#"+sectionid)
            var used = []
            $.each($(sect).find("select"), function(k,v) {
                if ($(v).val() != '') {
                    used.push( $(v).val() )
                }
            })
            if (used.length > 0) {
                $.get(
                    "",
                    {"ajax":1, "dt":dt, "role":role, "used": used.join(",")},
                    function (resp) {
                        $(sect).append(resp);
                    },
                    "TEXT"
                )
            }
        })
    })
</script>
<style type="text/css">
    body  { font-family: calibri, sans-serif; }
    table { border-collapse: collapse; font-size: 10pt; width: 90%; margin: 30px auto;}
    th,td { padding: 4px; width: 33%; background-color: #EEE; border: 1px solid #D0D0D0; }
    input[type='time']  { padding-right: 16px; text-align: center; }
    option:disabled { color: #F2D335; }
    .rolename { background-color: #D8D8D8; }
    .addrow   { text-decoration: none; background-color: #54BC54; border: 1px solid #000; padding:2px 8px; }
</style>
</head>
<body>
<header class="w3-container w3-black w3-padding">
    <h1>Example Staff Schedule</h1>
    <form method='GET'>
    <label>Week commencing </label>
    <input type='date' name='wkstart' value='<?=$wkstart?>'>
    <input type='submit' name='btnSub' value='Submit'>
    </form>
</header>
<form method='POST'>
<table border='1'>
    <?=$tdata?>
    <tr><td colspan='3' class="w3-center"><input type='submit' class="w3-button w3-blue" name='btnSub2' value='Update'></td></tr>
</table>
</form>
</body>
</html>

Hi Barand, would you be able to dump the db that you used to create this please as it is slightly different to my current layout but i would very much like to have a look at what you have created.

It looks, from first glance, to be exactly what i need.

The code looks a little complicated, so i want to have a good look through it and try and get my head around it.

Thanks so much for putting in this much effort, it really is appreciated.

Adamhumbug · January 10, 2020

20 hours ago, Psycho said:

You don't have to do this with JavaScript - although it would provide a better user experience. In fact, I think it is beneficial to build such functionality w/o JS to start and then add JS. But, I am unclear from your goal as to whether you are wanting to add management and chef rows independently or complete sections with both a management and chef line (or something else). Also, using a framework like JQuery is always a good idea.

EDIT: I just noticed none of your input fields have names. Are you intending for the user to submit the form once filled out and do something with that data? I would assume so and in that case the naming of the fields is important if you are going to be dynamically adding fields.

Hi Psycho, you are correct this will be submitted. I hadnt got around to sticking those in yet.

Adamhumbug · January 10, 2020

20 hours ago, Psycho said:

You don't have to do this with JavaScript - although it would provide a better user experience. In fact, I think it is beneficial to build such functionality w/o JS to start and then add JS. But, I am unclear from your goal as to whether you are wanting to add management and chef rows independently or complete sections with both a management and chef line (or something else). Also, using a framework like JQuery is always a good idea.

EDIT: I just noticed none of your input fields have names. Are you intending for the user to submit the form once filled out and do something with that data? I would assume so and in that case the naming of the fields is important if you are going to be dynamically adding fields.

And yes my goal is to add a new line to the chef and management individually

Adamhumbug · January 10, 2020

20 hours ago, Barand said:

You will need JS, definitely, and maybe ajax.

One approach is to make each management and chefs section a separate <tbody>..</tbody> section. That way you have something you can append to.

I like this idea, makes a lot of sense.

Barand · January 10, 2020

1 hour ago, Adamhumbug said:

would you be able to dump the db that you used to create this please

Certainly can...

CREATE TABLE `ssm_user` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(45) DEFAULT NULL,
  `lastname` varchar(45) DEFAULT NULL,
  `role_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`user_id`)
);

INSERT INTO `ssm_user` VALUES 
(1,'Michel','Roux',2),
(2,'Rick','Stein',2),
(3,'Jamie','Oliver',2),
(4,'Delia','Smith',2),
(5,'Gordon','Ramsay',2),
(6,'Nigella','Lawson',2),
(7,'Marco','Pierre-White',2),
(8,'Margaret','Thatcher',1),
(9,'Mark','Zuckerberg',1),
(10,'Bill','Gates',1),
(11,'Boris','Johnson',1),
(12,'Alan','Sugar',1);

Psycho · January 10, 2020

4 hours ago, Adamhumbug said:

Hi Psycho, you are correct this will be submitted. I hadnt got around to sticking those in yet.

Then you need to do that first. Your form, as it is, doesn't even have all the data you need. For example, you are outputting the fields associated with a date, but the "groups" of fields have nothing to indicate which date they are with. So, if the user submits you will have no way to know what date to use when inserting/updating the records. You should absolutely work on building a working process before adding the javascript. I foresee many other posts from you trying to work through what should be trivial issues if you just @Barand's code as-is without determining the naming/structure of the fields. Plus, since you are copying only a manager OR chef line (not the block), I think the AJAX call is unnecessary since all the data you need is within the DOM object.

First, you need to determine how you will logically "group" fields and ensure each group has the necessary data. E.g. how do you know which name/start/end fields go together. You will also need a hidden field to identify the date in each group of fields. Plus, if you are dealing with the ability to edit existing records as well as add records, you need an identifier to know which groups of fields are associated with existing records. If done quickly without much thought the act of copying a row can become quite complicated. If done with some thought, it makes the job much easier.

Below is a working example that does not use AJAX. Note that the "rec_id" field is to be populated with the ID when creating the page for the existing records. Entries added with the "Add" button will have an empty value. So, on the page that receives the form submission, you would use that data to determine whether to perform an UPDATE or INSERT.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $( function() {
        $(".addRow").on( "click", function() {
            //alert('test');
            //Make reference to the parent row
            var parentRow =  $(this).closest('tr');
            //Create a copy of the parent row
            var newRow = parentRow.clone();
            //Remove values in the Cloned Time & ID fields
            $(newRow).find('input[name^="start_time"]').val('');
            $(newRow).find('input[name^="end_time"]').val('');
            $(newRow).find('input[name^="rec_id"]').val('');
            //Select the name based on parent record and disable
            $(newRow).find('select[name^="name"]').val($(parentRow).find('select[name^="name"]').val());
            $(newRow).find('select[name^="name"]').prop('disabled', true);
            //Remove the add button
            $(newRow).find('button').remove();
            newRow.insertAfter(parentRow);
            return false;
        })
    })
    
    </script>
</head>
<body>
    <form>
    <table id='staffOrderTable' class='table table-striped table-bordered mt-3 text-center'>
        <tr>
            <th class='table-dark' colspan='3'>Tuesday - 24th December 2019</th>
        </tr>
        <tr>
            <th class='' colspan='3'>Management    </th>
        </tr>
        <tr>
            <th class='col-4'>Name</th>
            <th class='col-4'>Start Time</th>
            <th class='col-4'>End Time</th>
        </tr>
        <tr>
            <td>
                <input type='text' name='date[]' value='2019-12-24'>
                <input type='text' name='rec_id[]' value='21'>
                <select class='custom-select managerSelect' name="name[]">
                    <option value='5'>Manager A</option>
                    <option value='9'>Manager B</option>
                    <option value='2'>Manager C</option>
                </select>
            </td>
            <td><input class='form-control' type='' name='start_time[]' value='6:00'></td>
            <td><input class='form-control' type='' name='end_time[]' value='14:00'></td>
            <td><button class='addRow'>Add Row</button></td>
        </tr>
        <tr>
            <th colspan='3'>Chefs</th>
        <tr/>
        <tr>
            <th class='col-4'>Name</th>
            <th class='col-4'>Start Time</th>
            <th class='col-4'>End Time</th>
        </tr>
        <tr>
            <td>
                <input type='text' name='date[]' value='2019-12-24'>
                <input type='text' name='rec_id[]' value='54'>
                <select class='custom-select chefSelect' name="name[]">
                    <option value='8'>Chef A</option>
                    <option value='4'>Chef B</option>
                    <option value='7'>Chef C</option>
                </select>
            </td>
            <td><input class='form-control' type='' name='start_time[]' value='7:00'></td>
            <td><input class='form-control' type='' name='end_time[]' value='12:00'></td>
            <td><button class='addRow'>Add Row</button></td>
        </tr>
        <tr>
            <th class='table-dark' colspan='3'>Tuesday - 24th December 2019</th>
        </tr>
        <tr>
            <th class='' colspan='3'>Management    </th>
        </tr>
        <tr>
            <th class='col-4'>Name</th>
            <th class='col-4'>Start Time</th>
            <th class='col-4'>End Time</th>
        </tr>
        <tr>
            <td>
                <input type='text' name='date[]' value='2019-12-25'>
                <input type='text' name='rec_id[]' value='33'>
                <select class='custom-select managerSelect' name="name[]">
                    <option value='5'>Manager A</option>
                    <option value='9'>Manager B</option>
                    <option value='2'>Manager C</option>
                </select>
            </td>
            <td><input class='form-control' type='' name='start_time[]' value='6:00'></td>
            <td><input class='form-control' type='' name='end_time[]' value='14:00'></td>
            <td><button class='addRow'>Add Row</button></td>
        </tr>
        <tr>
            <th colspan='3'>Chefs</th>
        <tr/>
        <tr>
            <th class='col-4'>Name</th>
            <th class='col-4'>Start Time</th>
            <th class='col-4'>End Time</th>
        </tr>
        <tr>
            <td>
                <input type='text' name='date[]' value='2019-12-25'>
                <input type='text' name='rec_id[]' value='74'>
                <select class='custom-select chefSelect' name="name[]">
                    <option value='8'>Chef A</option>
                    <option value='4'>Chef B</option>
                    <option value='7'>Chef C</option>
                </select>
            </td>
            <td><input class='form-control' type='' name='start_time[]' value='8:00'></td>
            <td><input class='form-control' type='' name='end_time[]' value='16:00'></td>
            <td><button class='addRow'>Add Row</button></td>
        </tr>
    </table>
    </form>
</body>
</html>

Sign In

Create new line of dynamically populated content from button

Recommended Posts

Adamhumbug

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

Adamhumbug

Link to comment

Share on other sites

Adamhumbug

Link to comment

Share on other sites

Adamhumbug

Link to comment

Share on other sites

Adamhumbug

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information