JSFiddle - React, Tailwind, and code Playground

HTML

<div id="segment_form">
  <button id="add_condition">
    Click me
  </button>
</div>

JavaScript

var data_field = 'asset_locations_name';
var data_condition = 'in';
var data_values = ["1213381233", "1213551233", "1213551255"];

$("#segment_form").on('click', '#add_condition', function() {
  var li = '';
  var has_parenthesis = false;

  if (data_condition == 'in' || data_condition == 'not in' || data_condition == 'between' || data_condition == 'not between') {
    has_parenthesis = true;
  }

  if (data_values instanceof Array && data_values.length >= 1) {
    li += '<li data-field="' + data_field + '" data-condition="' + data_condition + '">';
    li += data_field + ' ' + data_condition;

    if (has_parenthesis) {
      li += '(';
    }

    $.each(data_values, function(index, value) {
      var preffix = (index == 0) ? '' : ', ';
      li += '<span title="Click to remove this item from the list" data-id="' + value + '">' + preffix + value + '</span>';
    });

    if (has_parenthesis) {
      li += ')';
    }
    li += '</li>';
  }

  console.log('data_field =>', data_field, 'data_condition => ', data_condition, 'data_values =>', data_values, 'li =>', li);

  $('body').append(li);
});