JSFiddle - React, Tailwind, and code Playground
HTML
<div id="left">
<table>
<tr class="product-specs-table-row">
<td class="spec-table-button-container"><a class="spec-table-quote-button">+</a></td>
<td>DRM6-22000</td>
<td>22000</td>
<td>10</td>
<td>2.74</td>
<td>2</td>
<td>1.36</td>
</tr>
<tr class="product-specs-table-row">
<td class="spec-table-button-container"><a class="spec-table-quote-button">+</a></td>
<td>DRM6-27000</td>
<td>27000</td>
<td>10</td>
<td>3.71</td>
<td>1.7</td>
<td>1.33</td>
</tr>
<tr class="product-specs-table-row">
<td class="spec-table-button-container"><a class="spec-table-quote-button">+</a></td>
<td>DRM6-33000</td>
<td>33000</td>
<td>10</td>
<td>4.16</td>
<td>1.7</td>
<td>1.33</td>
</tr>
<tr class="product-specs-table-row">
<td class="spec-table-button-container"><a class="spec-table-quote-button">+</a></td>
<td>DRM6-39000</td>
<td>39000</td>
<td>10</td>
<td>5.55</td>
<td>1.4</td>
<td>1.31</td>
</tr>
<tr class="product-specs-table-row">
<td class="spec-table-button-container"><a class="spec-table-quote-button">+</a></td>
<td>DRM6-47000</td>
<td>47000</td>
<td>10</td>
<td>6.19</td>
<td>1.4</td>
<td>1.34</td>
</tr>
</table>
</div>
<div id="right">
<form id="quote">
<label class="qq-hide">Quantity</label>
<label>Part Number</label>
<label class="qq-hide">Tolerance</label>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<button type="button"...
CSS
.body {
width:100%;
}
a {
cursor:pointer;
}
table {
width:90%;
}
.product-specs-table-row {
width:auto;
}
.product-specs-table-row:nth-child(even) {
background:#f8f8f8;
}
.product-specs-table-row:nth-child(odd) {
background:#ffffff;
}
.product-specs-table-row:hover {
background:#bf1e2e;
color:#fff;
}
.product-specs-table-row td {
font-size:0.6875em;
margin:0;
padding:1% 2%;
text-align:center;
}
.qq-hide {
display:none;
}
#left, #right {
width:45%;
display:inline-block;
margin-right:-5px;
vertical-align:top;
}
JavaScript
$('.spec-table-quote-button').click(function() {
var toCopy = $(this).closest('tr').find('td:eq(1)').text();
var copyInto = $(".part-number-input").val('');
$(copyInto).val(toCopy);
$('.add-field').click();
});
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});